上一篇文章里面大致記錄了一下axios的基礎(chǔ)用法
這一篇文章主要記錄axios的進階用法：實例、配置、攔截器、取消請求

實例

let instance = axios.create({
  baseURL: 'http://localhost:9000/api',
  timeout: 1000,
  //url: '/contactList'
  //method: 'get,post,put,patch,delete',
  headers: {
    token: ''
  }, //請求頭
  //params:{}, //拼接在url 上的請求參數(shù)
  //data: {}, //放在請求體的請求參數(shù)
})

instance.get('/contactList',{
  params: {
    id: 1
  }
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(res)
})

配置

axios的配置參數(shù)有哪些：

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)
})

優(yōu)先級別：請求配置>實例配置>全局配置（即最后的超時時間是5000）

攔截器

攔截器：在請求或響應被處理前攔截它們。分為請求攔截器、響應攔截器
請求攔截器：

axios.interceptors.request.use(config=>{
  //在發(fā)送請求前做些什么
  //config.headers.token = '', //需要登錄攔截的請求
  return config
}, err=>{
  //在請求錯誤的時候做些什么
  return Promise.reject(err)
})

響應攔截器

axios.interceptors.response.use(config=>{
  //請求成功對響應數(shù)據(jù)做處理
  return res
}, err=>{
  //響應錯誤做些什么
  return Promise.reject(err)
})

比如在移動端開發(fā)時：在發(fā)送請求前需要加一個遮罩層，在請求錯誤或響應結(jié)束的時候取消遮罩層、以及需要登錄攔截的請求接口，需要在請求之前，給請求頭配置上相關(guān)信息，這些操作都可以加在攔截器里面。