axios请求---进阶用法

上一篇文章里面大致记录了一下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)
})

比如在移动端开发时：在发送请求前需要加一个遮罩层，在请求错误或响应结束的时候取消遮罩层、以及需要登录拦截的请求接口，需要在请求之前，给请求头配置上相关信息，这些操作都可以加在拦截器里面。