wuqi57 / saber-ajax

适用于移动端、promise 风格的 ajax 封装

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

saber-ajax Build Status

适用于移动端、promise风格的ajax封装,支持XMLHttpRequest2

吾王之名~

Usage

通过edp引入模块

$ edp import saber-ajax
var request = ajax.get(url);
request.then(
    // 请求完成
    // data为responseText
    function (data) {
        renderData(data);
    },

    // 请求失败
    // error参数可能为以下四种情况
    // * 请求超时: 'timeout'
    // * 请求中止: 'abort'
    // * 未知错误: 'error'
    // * 其它情况: HTTP Status Code
    function (error) {
        showError(error);
    }
);

API

get( url , query )

发起异步GET请求,返回Request对象

  • url {string} 请求地址
  • query {Object=} 查询条件,可选。会自动进行encodeURIComponent处理

post( url, data )

发起异步POST请求,返回Request对象

  • url {string} 请求地址
  • data {Object|string=} 请求数据,可选。支持以下类型:
    • {string} 不会对参数进行任何处理,需要注意自行进行encodeURIComponent处理
    • {Object} 会自动进行URL参数序列化并对各value进行encodeURIComponent处理,注意 暂时只支持单一层级序列化,不支持多层级(比如{date: {begin: '2012', end: '2013'}}

request( url, options )

发起请求,options配置项参数为可选

  • options.method {string=} 请求方式,默认为'GET'
  • options.data {string|Object=} 请求参数,支持FormData
  • options.stringify {boolean=} 是否自动序列化请求参数,默认为true
  • options.async {boolean=} 是否异步请求,默认为true
  • options.headers {Object=} 需要额外设置的请求头
  • options.timeout {number=) 请求超时时间,单位ms,注意 只有异步请求才有效
  • options.username {string=} 用户名
  • options.password {string=} 密码
  • options.responseType {string=} 返回的数据类型,默认为空。textarraybuffer各浏览器的支持力度较好,其它选项使用前请多多思量~

on( event, fn )

注册全局事件

  • event {string} 事件名称,支持以下事件
    • 'success' 请求成功事件,任意请求成功时触发
    • 'fail' 请求失败事件,任意请求失败时触发
  • fn {Function(Requester,*)} 事件处理函数,触发时带有两个参数
    • {Requester} 请求对应的Requester对象
    • {*} 请求成功时是请求的返回结果,请求失败时是错误信息(参考request.then关于错误信息的描述)

可以通过注册全局事件配合requester.handleFail来提供默认的请求失败处理,比如:

var ajax = require('saber-ajax');

// 注册全局失败事件
ajax.on('fail', function (req, error) {
    // 如果当前的失败请求没有被处理过
    // 则显示默认的错误提示
    if (!req.handleFail) {
        alert('亲~请求失败啦');
    }
});

Requester

ajax.getajax.postajax.request的返回参数,对XMLHttpReqeust的封装,实现了Promise接口

.url

{string} 请求地址

.xhr

{XMLHttpRequest} 原始的XMLHttpRequest对象

.handleSuccess

{boolean} 是否已处理请求成功的情况

.handleFail

{boolean} 是否已处理请求失败的情况

.then( onFulfill, onReject )

添加请求成功和失败的处理函数,请参考Promise.then

  • onFulfill {Function({*})=} 请求成功处理,参数为请求的返回结果
  • onReject {Function({*})=} 请求失败处理,参数为错误信息,有四种取值:
    • 'error' {string} 未知错误
    • 'timeout' {string} 请求超时
    • 'abort' {string} 请求中止
    • HTTP Status Code: {number} 其它情况为请求返回的HTTP状态码

.success( success )

添加请求成功处理,相当于.then(success)

  • success {Function} 成功处理函数

.fail( fail )

添加请求失败处理 相当于.then(null, fail)

  • fail {Function} 失败处理函数

.ensure( callback )

添加请求完成处理函数,不论请求是成功还是失败都会被调用,相当于.then(callback, callback)

  • callback {Function} 完成处理函数

.abort()

中止请求

Test

启动测试服务器

$ node test/server.js

默认端口为8848,可以通过参数修改:

$ node test/server.js 8080

访问http://localhost:8848/test/runner.html

===

Saber

About

适用于移动端、promise 风格的 ajax 封装