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

请求失败

请求成功