ajax
基于Promise
的ajax
实现,支持browser和node环境,jsonp
不支持node。
除了axios外,不依赖其他第三方库。
使用时请确保存在全局的Promise
实现。
API
ajax(ajaxOptions, config?): Promise
ajaxOptions
是请求的参数,config
是函数内部的一些可选配置。返回值是一个Promise
,请求成功会resolve
,请求失败会
reject
。
请求成功时resolve
的结果:
{
data: {},
status: 200,
statusText: 'OK',
headers: {},
config: {}
}
请求失败时reject
的结果:
ajax({ url: '/user/1' })
.catch(function (error) {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else {
console.log('Error', error.message);
}
});
ajax
请求参数
url
: <string
> 请求的地址method
/ type
: <string
> 请求的类型,默认GET
请求data
: <object
> HTTP请求的参数,GET
/ HEAD
类请求会作为URL参数,POST
/ PUT
等请求会作为body
contentType
: <string
> 发送给服务器的数据类型,POST
/ PUT
等请求默认值为* 'application/x-www-form-urlencoded; charset=UTF-8'
dataType
: <string
> 请求的返回值类型,默认json
,可选项arraybuffer
, blob
, document
, json
, * text
, stream
headers
: <object
> HTTP请求的头,'X-Requested-With': 'XMLHttpRequest'
一定会加上。withCredentials
: <bool
> 默认false
, indicates whether or not cross-site Access-Control requests should be made using credentialsusername
: <string
> HTTP请求的用户名password
: <string
> HTTP请求的密码timeout
: <number
> 请求的超时时间,0
表示没有超时noXRequestedWithHeader
: <bool
> 是否强制加上X-Requested-With
这个头,这个头会触发CORS preflight,默认 true
,不加这个头;设为 false
的话会强制加上这个头。这个默认值和名字可能感觉很难受,这么做是为了保持向后兼容老代码。onUploadProgress
: <function
> 上传请求的进度回调函数,参数是 progressEventonDownloadProgress
: <function
> 下载请求的进度回调函数,参数是 progressEventcancelToken
: <CancelToken
> 用来取消请求的token,具体请看下面的取消请求文档allowBigNumberInJSON
: <bool
> 如果为 true
,将使用一个自定义的 JSON parser,这个 parser 会将某些大整数或者精度过高的小数会表示成字符串。
jsonp
请求参数
url
: <string
> 请求的地址jsonp
: <string
> JSONP
请求的回调参数名称, callback=__jp01
中的callback
部分,默认为callback
jsonpCallback
: <string
|function
> JSONP
请求的回调函数名,如果是函数则使用函数的返回值,callback=__jp01
中的__jp01
部分,默认值是每次请求都生成一个不一样的名字timeout
: <number
> 请求的超时时间,0
表示没有超时cache
: <bool
> 如果设置为false
,会强制浏览器不缓存请求,默认为false
config
config.transformRequest(ajaxOptions): ajaxOptions
接受一个ajax
请求的参数对象,可以对这个参数做一些处理,
返回值也是一个ajax
请求的参数。主要用来在发送请求前对参数做一些转换。
取消请求
使用 ajax
上的 CancelToken
创建 token,有两种使用方式。
不同的请求可以使用同一个token,调用这个 token 的 cancel
方法时会同时取消所有使用这个 token 的请求。
jsonp 请求不支持取消操作。
var CancelToken = ajax.CancelToken;
var source = CancelToken.source();
ajax({
url: ''/user/12345',
cancelToken: source.token
}).catch(function(thrown) {
if (ajax.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
var CancelToken = ajax.CancelToken;
var cancel;
ajax({
url: '/user/12345',
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
cancel();
关于URL参数序列化
内部使用的序列化函数等价于jQuery.param(value, false)