上一篇文章里面大致记录了一下axios的基础用法
这一篇文章主要记录axios的进阶用法：实例、配置、拦截器、取消请求
实例
let instance = axios.create({
baseURL: 'http://localhost:9000/api',
timeout: 1000,
//url: '/contactList'
//method: 'get,post,put,patch,delete',
headers: {
token: ''
}, //请求头
//params:{}, //拼接在url 上的请求参数
//data: {}, //放在请求体的请求参数
})
instance.get('/contactList',{
params: {
id: 1
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(res)
})
配置
axios的配置参数有哪些：
baseURL,timeout,url,method,headers,params,data,withCredentials....
axios全局配置
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'http://localhost:9000/api';
axios实例配置
let instance = axios.create();
instance.defaults.timeout = 3000
axios请求配置
instance.get('/contactList',{
timeout: 5000
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(res)
})
优先级别：请求配置>实例配置>全局配置（即最后的超时时间是5000）
拦截器
拦截器：在请求或响应被处理前拦截它们。分为请求拦截器、响应拦截器
请求拦截器：
axios.interceptors.request.use(config=>{
//在发送请求前做些什么
//config.headers.token = '', //需要登录拦截的请求
return config
}, err=>{
//在请求错误的时候做些什么
return Promise.reject(err)
})
响应拦截器
axios.interceptors.response.use(config=>{
//请求成功对响应数据做处理
return res
}, err=>{
//响应错误做些什么
return Promise.reject(err)
})
比如在移动端开发时：在发送请求前需要加一个遮罩层，在请求错误或响应结束的时候取消遮罩层、以及需要登录拦截的请求接口，需要在请求之前，给请求头配置上相关信息，这些操作都可以加在拦截器里面。
