Axios 是一个基于 promise 的 HTTP 库
使用 npm:
$npminstallaxios
使用 bower:
$bowerinstallaxios
使用 cdn:
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>Example
执行GET请求
//为给定ID的user创建请求axios.get('/user?ID=12345').then(function(response){console.log(response);}).catch(function(error){console.log(error);});//可选地，上面的请求可以这样做axios.get('/user',{params:{ID:12345}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});
执行POST请求
axios.post('/user',{firstName:'Fred',lastName:'Flintstone'}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});
执行多个并发请求
functiongetUserAccount(){returnaxios.get('/user/12345');}functiongetUserPermissions(){returnaxios.get('/user/12345/permissions');}axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){//两个请求现在都执行完成}));axios API
可以通过向axios传递相关配置来创建请求
//发送POST请求axios({method:'post',url:'/user/12345',data:{firstName:'Fred',lastName:'Flintstone'}});axios(url[, config])
//发送GET请求（默认的方法）axios('/user/12345');请求方法的别名
为方便起见，为所有支持的请求方法提供了别名
axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])NOTE在使用别名方法时，url、method、data这些属性都不必在配置中指定。
处理并发请求的助手函数
axios.all(iterable)axios.spread(callback)创建实例可以使用自定义配置新建一个 axios 实例
axios.create([config])varinstance=axios.create({baseURL:'https://some-domain.com/api/',timeout:1000,headers:{'X-Custom-Header':'foobar'}});实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并
axios#request(config)axios#get(url[, config])axios#delete(url[, config])axios#head(url[, config])axios#post(url[, data[, config]])axios#put(url[, data[, config]])axios#patch(url[, data[, config]])请求配置这些是创建请求时可以用的配置选项。只有url是必需的。如果没有指定method，请求将默认使用get方法。
{//`url`是用于请求的服务器URLurl:'/user',//`method`是创建请求时使用的方法method:'get',//默认是get//`baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。//它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URLbaseURL:'https://some-domain.com/api/',//`transformRequest`允许在向服务器发送前，修改请求数据//只能用在'PUT','POST'和'PATCH'这几个请求方法//后面数组中的函数必须返回一个字符串，或ArrayBuffer，或StreamtransformRequest:[function(data){//对data进行任意转换处理returndata;}],//`transformResponse`在传递给then/catch前，允许修改响应数据transformResponse:[function(data){//对data进行任意转换处理returndata;}],//`headers`是即将被发送的自定义请求头headers:{'X-Requested-With':'XMLHttpRequest'},//`params`是即将与请求一起发送的URL参数//必须是一个无格式对象(plainobject)或URLSearchParams对象params:{ID:12345},//`paramsSerializer`是一个负责`params`序列化的函数//(e.g.https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)paramsSerializer:function(params){returnQs.stringify(params,{arrayFormat:'brackets'})},//`data`是作为请求主体被发送的数据//只适用于这些请求方法'PUT','POST',和'PATCH'//在没有设置`transformRequest`时，必须是以下类型之一：//-string,plainobject,ArrayBuffer,ArrayBufferView,URLSearchParams//-浏览器专属：FormData,File,Blob//-Node专属：Streamdata:{firstName:'Fred'},//`timeout`指定请求超时的毫秒数(0表示无超时时间)//如果请求话费了超过`timeout`的时间，请求将被中断timeout:1000,//`withCredentials`表示跨域请求时是否需要使用凭证withCredentials:false,//默认的//`adapter`允许自定义处理请求，以使测试更轻松//返回一个promise并应用一个有效的响应(查阅[responsedocs](#response-api)).adapter:function(config){/*...*/},//`auth`表示应该使用HTTP基础验证，并提供凭据//这将设置一个`Authorization`头，覆写掉现有的任意使用`headers`设置的自定义`Authorization`头auth:{username:'janedoe',password:'s00pers3cret'},//`responseType`表示服务器响应的数据类型，可以是'arraybuffer','blob','document','json','text','stream'responseType:'json',//默认的//`xsrfCookieName`是用作xsrftoken的值的cookie的名称xsrfCookieName:'XSRF-TOKEN',//default//`xsrfHeaderName`是承载xsrftoken的值的HTTP头的名称xsrfHeaderName:'X-XSRF-TOKEN',//默认的//`onUploadProgress`允许为上传处理进度事件onUploadProgress:function(progressEvent){//对原生进度事件的处理},//`onDownloadProgress`允许为下载处理进度事件onDownloadProgress:function(progressEvent){//对原生进度事件的处理},//`maxContentLength`定义允许的响应内容的最大尺寸maxContentLength:2000,//`validateStatus`定义对于给定的HTTP响应状态码是resolve或rejectpromise。如果`validateStatus`返回`true`(或者设置为`null`或`undefined`)，promise将被resolve;否则，promise将被rejectevalidateStatus:function(status){returnstatus>=200&&status<300;//默认的},//`maxRedirects`定义在node.js中follow的最大重定向数目//如果设置为0，将不会follow任何重定向maxRedirects:5,//默认的//`httpAgent`和`httpsAgent`分别在node.js中用于定义在执行http和https时使用的自定义代理。允许像这样配置选项：//`keepAlive`默认没有启用httpAgent:newhttp.Agent({keepAlive:true}),httpsAgent:newhttps.Agent({keepAlive:true}),//'proxy'定义代理服务器的主机名称和端口//`auth`表示HTTP基础验证应当用于连接代理，并提供凭据//这将会设置一个`Proxy-Authorization`头，覆写掉已有的通过使用`header`设置的自定义`Proxy-Authorization`头。proxy:{host:'127.0.0.1',port:9000,auth::{username:'mikeymike',password:'rapunz3l'}},//`cancelToken`指定用于取消请求的canceltoken//（查看后面的Cancellation这节了解更多）cancelToken:newCancelToken(function(cancel){})}响应结构
某个请求的响应包含以下信息
{//`data`由服务器提供的响应data:{},//`status`来自服务器响应的HTTP状态码status:200,//`statusText`来自服务器响应的HTTP状态信息statusText:'OK',//`headers`服务器响应的头headers:{},//`config`是为请求提供的配置信息config:{}}
使用then时，你将接收下面这样的响应：
axios.get('/user/12345').then(function(response){console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});
在使用catch时，或传递rejection callback作为then的第二个参数时，响应可以通过error对象可被使用，正如在错误处理这一节所讲。
你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值axios.defaults.baseURL='https://api.example.com';axios.defaults.headers.common['Authorization']=AUTH_TOKEN;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';自定义实例默认值
//创建实例时设置配置的默认值varinstance=axios.create({baseURL:'//在实例已创建后修改默认值instance.defaults.headers.common['Authorization']=AUTH_TOKEN;配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是：在lib/defaults.js找到的库的默认值，然后是实例的defaults属性，最后是请求的config参数。后者将优先于前者。这里是一个例子：
//使用由库提供的配置的默认值来创建实例//此时超时配置的默认值是`0`varinstance=axios.create();//覆写库的超时默认值//现在，在超时前，所有请求都会等待2.5秒instance.defaults.timeout=2500;//为已知需要花费很长时间的请求覆写超时设置instance.get('/longRequest',{timeout:5000});拦截器
在请求或响应被then或catch处理前拦截它们。
//添加请求拦截器axios.interceptors.request.use(function(config){//在发送请求之前做些什么returnconfig;},function(error){//对请求错误做些什么returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//对响应数据做点什么returnresponse;},function(error){//对响应错误做点什么returnPromise.reject(error);});
如果你想在稍后移除拦截器，可以这样：
varmyInterceptor=axios.interceptors.request.use(function(){/*...*/});axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
varinstance=axios.create();instance.interceptors.request.use(function(){/*...*/});错误处理
axios.get('/user/12345').catch(function(error){if(error.response){//请求已发出，但服务器响应的状态码不在2xx范围内console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);}else{//SomethinghappenedinsettinguptherequestthattriggeredanErrorconsole.log('Error',error.message);}console.log(error.config);});
可以使用validateStatus配置选项定义一个自定义 HTTP 状态码的错误范围。
axios.get('/user/12345',{validateStatus:function(status){returnstatus<500;//状态码在大于或等于500时才会reject}})取消
使用cancel token取消请求
Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。
可以使用CancelToken.source工厂方法创建 cancel token，像这样：
varCancelToken=axios.CancelToken;varsource=CancelToken.source();axios.get('/user/12345',{cancelToken:source.token}).catch(function(thrown){if(axios.isCancel(thrown)){console.log('Requestcanceled',thrown.message);}else{//处理错误}});//取消请求（message参数是可选的）source.cancel('Operationcanceledbytheuser.');
还可以通过传递一个 executor 函数到CancelToken的构造函数来创建 cancel token：
varCancelToken=axios.CancelToken;varcancel;axios.get('/user/12345',{cancelToken:newCancelToken(functionexecutor(c){//executor函数接收一个cancel函数作为参数cancel=c;})});//取消请求cancel();
Note : 可以使用同一个 cancel token 取消多个请求
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
