axios請求、攔截器

一、請求方式

1、get請求

 //get請求
// 發送 POST 請求
axios({
  method: 'get',
  url: '/user/12345',
  
});

2、post請求

// 發送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

3、request

axios.request({
    method:'',
    url:'',
    ...
})

二、請求攔截器

場景：在每次發送請求時，攜帶用戶token方便后台做用戶相關操作

在每次發送請求前，都會進入請求攔截器，我們可以在此處統一綁定上想要發送的參數，則每個請求都會自動攜帶token

axios.interceptors.request.use(config => {
    //config是axios配置對象
    //每次發送請求前都會進入此攔截器處理函數，可以在此處統一攜帶上token，每次請求都會自
    config.headers.common['token'] = localStorage.getItem(“token”);
    return config
},err => {
    //請求出錯的處理函數
    return Promise.reject(err)
})

三、響應攔截器

場景：服務器所有接口都會返回一個錯誤碼，比如10001，請求參數錯誤。 10002，用戶未授權等等，我們需要在收到響應后對錯誤碼進行相關提示。

在每次收到響應時，都會先進入響應攔截器，在分發給各個請求函數，我們可以在此處統一先處理錯誤碼，在進入各自的響應細節函數處理res

axios.interceptors.response.use(function(res){
//收到響應后，可以先統一處理錯誤碼
switch (res.data.code) {
       case 10001:   alert(‘非法操作’);
router.push({path: '/});
       case 10002:  alert(‘權限不足’);
       ......
    }
    return res;
},function(err){
    //響應出錯進入的函數
    return Promise.reject(err);
});

以上就是axios攔截器的使用教程及場景.不管任何項目，只要使用的是axios發送請求，則都可以使用攔截器進行統一處理，減少冗余代碼，降低二次開發及維護難度.