axios學習筆記(2)

axios的基本配置參數

 axios.create({
     baseUrl:xxxx 請求基本域名
     timout:超時時長
     url:請求路徑 '/data.json'
     method :請求方法
     headers:{
         token:''
     } 請求頭設置
     params:{}//請求參數拼接在url上
     data：{}//請求參數放在請求體上
 })

• axios全局配置
  axios.defaults.timeout=1000
  axios.defaults.baseUrl=‘ssss’

• axios實例配置
  let instance = axios.create({實例配置參數})
  instance.defaults.timeout =3000//修改實例配置

• axios請求配置
  instance.get(’/data.json’,{
  timeout:5000
  })

  3種配置優先級：
  全局配置最低，實例配置中等，請求配置最高

axios攔截器：在請求或響應被處理前攔截

• 請求攔截器

    axios.interceptors.request.use( config=>{
        //在發送請求前做什麼
        return config
    },err=>{
        //請求錯誤的時候做些什麼
        return Promise.reject(err);
    })

實際開發的例子，加上token
   let instance = axios.create({})
   instance.interceptors.request.use( config=>{
        //在發送請求前做什麼
        config.headers.token = 'sxsxsdasdasr ';
        return config
    },err=>{
        //請求錯誤的時候做些什麼
        return Promise.reject(err);
    })

• 響應攔截器

 axios.interceptors.response.use( res=>{
        //請求成功後對響應數據做處理
        return res
    },err=>{
        //響應錯誤的時候做些什麼
        return Promise.reject(err);
    })

錯誤處理

    axios.interceptors.request.use( config=>{
        //在發送請求前做什麼
        return config
    },err=>{
        //請求錯誤 一般http狀態碼以4開頭，常見401/404
        return Promise.reject(err);
    })


 axios.interceptors.response.use( res=>{
        //請求成功後對響應數據做處理
        return res
    },err=>{
        //響應錯誤處理一般http狀態碼以5開頭，一般常見500/502
        return Promise.reject(err);
    })

無論是請求錯誤，還是響應錯誤，最終都會被catch捕捉到，我們可以進行catch中進行處理
axios.post('/post',data).then((res)=>{
     console.log(res);
 }).catch(err=>{
     console.log(err);
 })

取消請求

let source = axios.CancelToken.source();
axios.post('/post',{
    cancelToken:source.token
}).then((res)=>{
     console.log(res);
 }).catch(err=>{
     console.log(err);
 })
 
 //取消請求(message 可選)
 source.cancel('cancel http')