react中進一步封裝axios,對錯誤資訊進行攔截

react中進一步封裝axios

之前在react專案中封裝了axios

但是在每次請求的時候都要判斷，後臺返回的狀態碼，很麻煩。

async componentDidMount () {
     await $http.get('/station/list').then((res)=>{
   this.setState({
     data: res.data.data,
     total:res.data.data.length
   })
          if(res.data.data.code!==200) {
       console.log("請求成功！")
       else{
           console.log("請求失敗！")
       }
   }
     }).catch((err)=>{
        console.log(err)
     })
    
 
  }

於是可以進一步對axios進行封裝，對axios的響應進行攔截

import axios from "axios";
axios.defaults.baseURL = 'http://xxxxx/api'
const $http = axios.create();
$http.interceptors.request.use(config => {
    // 給請求頭加上Authorization的欄位,值為token
    config.headers.Authorization = window.sessionStorage.getItem('token')
    config.headers.authJWT = window.sessionStorage.getItem('token')
    return config
})

// 對響應進行攔截
$http.interceptors.response.use((response)=>{

    if(response.data.code==="200") {
        console.log('請求成功！');
    }else{
        console.log('請求失敗！');

    }
    if(response.status!==200) {
        alert("請求失敗！")
    }   
return response
},(err)=>{
        console.log(err);
})

export default $http;

這樣就不用在每次請求的時候都判斷一下狀態碼了

async componentDidMount () {
     await $http.get('/station/list').then((res)=>{
   this.setState({
     data: res.data.data,
     total:res.data.data.length
   })
   console.log(res.data.data);
     })
    
 
  }

請求失敗

請求成功