默认配置
axios的默认配置是可以修改的,修改后用于所有的请求。
全局axios默认值
axios.defaults.baseRUL='http://baidu.com';
axios.defaults.headers.common['Authorization']=AUTH_TOKEN;
axios.defaults.post['Content-Type']='appliccaion/x-www-form-urlencoded';
自定义实例默认值
//创建实例设置配置默认值
const instance= axios.create({
baseURL:'https://api.com'
})
//实例创建后修改默认值
instance.defaults.headers.common['Authorization']=AUTH_TOKEN;
配置优先级顺序
配置将与优先级合并。顺序是lib/defaults.js里的库默认值,然后是实例的默认值,最后是请求的config的参数值。后者的优先级高于前者。
//创建一个实例,使用库提供的配置默认值
//此时,config配置值是0,因为库的默认值就是0
const instance=axios.create();
//覆盖库的timeout默认值
//现在所有使用这个实例的请求都将在超时前等待2.5秒
instance.defaults.timeoout=2500;
//覆盖请求的timeout,因为已知它需要更长的时间
instance.get('./longRequest',{
timeou:5000
})
Interceptors拦截器
你可以拦截请求或者响应在他们被then或者catch处理之前
//添加一个请求拦截器
axios.intercepters.request.use(function(config){
//do something before request is sent
return config;
},funcction(error){
//do something with request error
return Promise.rejet(error);
})
//添加一个响应拦截器
axios.interceptors.response.use(function(response){
//do something with the response data
return response;
},function(error){
//do something with the response error
return Promise.reject(error);
})
实例:
service.interceptors.request.use((config) => {
store.commit(STORE_TYPE.IS_LOADING,true);
if(config.method === 'post'){
config.data = qs.stringfy(config.data);
}
return config;
},(error) => {
console.log('错误的传参','fail');
return Promise.reject(error);
})
//响应拦截器
service.interceptors.response.use((res) => {
store.commit(STORE_TYPE_IS_LADING,false);
if(res.data.code==0){
Message({
message:res.data.msg,
type:'error',
duration: 5*1000
})
return Promise.reject(res)
}
return res;
},(error) => {
store.commit(STORE_TYPE_IS_LOADING,false);
console.log("网络异常",'fail');
return Promise.reject(error);
})
后面你可能需要移除拦截器,可以的!
const myInterceptor=axios.interceptors.request.use(function9){
})
axios.interceptors.request.eject(myInterceptor);//移除拦截器
你也可以给一个自定义的axios实例添加拦截器
const instance=axios.create();
instance.interceptors.request.use(function(){/*...*/});
错误处理
axios.get('/user/123')
.catch(function(error){
if(error.response){
//发送请求后服务器生成了一个超出2XX范围的状态码
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.heders);
console.log(error.response.headers);
}else if(error.request){
//请求发送后没有得到响应
//error.request是一个浏览器的XMLHttpRequest实例或者nodejs里的http.ClientRequest
console.log(error.request);
}else{
//设置请求时发生了一些事触发了一个错误
console.log('Error',error.message);
}
console.log(error.config);
})
你可以使用validateStatus
配置选项定义一个自定义的HTTP状态码错误范围
axios.get('/user/133',{
validateStatus:function(status){
return status < 500; //当状态码等于或大于500的时候reject
}
})
消除
你可以使用cancel token
取消一个请求
axios cancel token API 基于已经被撤回的,并不再活跃于TC39的可取消promises协议
const CancelToken=axios.CancelToken;
const source=CancelToken.source();
//取消请求get写法
axios.get('/user.123',{
CancelToken: source.token
}).catch(function(thrown){
if(axios.isCancel(thrown)){
console.log('Request canceled',thrown.message);
}else{
//handle error
}
});
//取消请求post写法
axios.post('/user/123',{
name:'new name'
},{
cancelToken:source.token
})
//取消请求
source.cancel('Operation canceled by the user.');
你也可以通过给CancelToken的构造函数传递一个executor函数来创建一个cancel token。
const CancelToken=axios.CancelToken;
let cancel;
axios.get('/user/123',{
cancelToken:new CancelToken(function executor(c){//一个executor函数接收一个cancel函数作为参数
cancel=c;
})
});
//取消请求
cancel();
注意:你可以使用同一个cancel token取消多个请求/
使用application/x-www-form-urlencoded f格式
默认地,axios序列化js对象为JSON。如果不用JSON格式而是以application/x-www-form-urlencoded格式发送数据的话,你可以使用以下的选项之一。
Browser
在浏览器中,你可以使用URLSerachParams API,
const params=new URLSerachParams();
params.apend('param1':'values1');
params.apend('param2':'values2');
axios.post('/foo',params);
注意:URLSearchParams并非支持所有浏览器see in can i use,但是有个polyfill可以用(确保polyfill全局环境)
或者,你可以使用qs
库编码数据。
const qs = require('qs');
axios.post('/foo',as.stringify({ 'bar':123 }));
或者另一种方式(ES2015),
iport qs from 'qs'
const data = { 'bar':123 }
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: as.stringfy(data),
url,
};
axios(options);
Node.js
在nodejs里,你可以使用querystring模块或者qs模块可以替代。
const querystring=require('querystring');
axios.post('http://baidu.com',querystring.stringfigy({ foo:123 }));
Semver
在axios达到1.0版本之前,破坏性更改将以新的次要版本发布。例如0.5.1和0.5.4将具有相同的API,但0.6.0将具有重大变化。
Promises
axios依赖于原生ES6 Promise实现的支持。如果您的环境不支持ES6 Promise,则可以使用[polyfill](https://github.com/stefanpenner/es6-promise)。
TypeScript
axios包括TypeScript定义。
import axios from 'axios';
axios.get('/user?ID=123');
axios在很大程度上受到Angular提供的 http-like服务。