Axios-拦截器interceptors

有4个拦截：请求成功 | 请求失败 | 响应成功 | 响应失败

export function request(config) {
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    //拦截器
    instance.interceptors.request.use(
      //请求成功 ，有网一般都能请求成功
      config=>{
        console.log(config);
        //1.比如config中的信息不符合服务器的要求
        //2.每次发送网络请求时，都希望在界面中显示一个请求的图标，添加请求的动画
        //3.某些网络请求(比如登录(token)),必须携带一些特殊的东西, 拦截掉，跳转至指定界面就
        return config //接续执行，放行
      },
      //请求失败
      err=>{
        console.log(err);
      }
    )

    //响应拦截
    instance.interceptors.response.use(
      res=>{
        console.log(res);
        return res.data //接续执行
      },
      err=>{
        console.log(err);
      }
    )
    return instance(config)
}

拦截请求的config
request

响应的数据

自己的总结

//请求拦截
instance.interceptors.request.use(config=>{
  //每次请求都带上token
  config.headers['authorization'] = localStorage.getItem("token")
  return config
  }, err=>{ //请求失败
     Element.Message.error('请求失败' + err,{duration: 3000})
  })


//响应拦截
instance.interceptors.response.use(
  //服务器响应成功，Result返回的结果
  res=>{
    console.log('服务端可以响应数据'); console.log(res);
    if(res.data.code === 200) return res.data; //回调结果,获取数据就是 res.data（result).data(result中的data结果集)
    else{
      //自己返回Result 的异常
      Element.Message.error(res.data.msg?res.data.msg:'服务器可以响应,返回结果msg为空') // res.data
      //拦截响应，阻止运行
      return Promise.reject(res.data.msg); //直接返回result里面的msg信息
    }
  },
  //服务器无法响应
  err=>{
    console.log('服务器无法响应')
    console.log(err);
    //if(err.response.data) err.message = err.response.data.msg
    //if(err.response.status === 401) router.push('/login')

    Element.Message.error('服务器不能响应数据 ' + err.message,{duration: 3000})
    return Promise.reject(err) //回调

    /**
     * 这就是err
     * Error: Request failed with status code 404
     at createError (createError.js?2b31:16)
     at settle (settle.js?e8a0:17)
     at MockXMLHttpRequest.handleLoad [as onreadystatechange] (xhr.js?5e03:62)
     at MockXMLHttpRequest.dispatchEvent (mock.js?03a1:8476)
     at XMLHttpRequest.handle (mock.js?03a1:8304)
     */
  }
)