Axios拦截器

一、Axios拦截器是什么

• 就是拦截每一次的请求和响应，然后进行相应的处理。请求拦截器，它可以统一在你发送请求前在请求体里加上token；响应拦截器的话，是在接受到响应之后进行的一些操作，比如，服务器返回登录状态失效，需要重新登录的时候，就给它跳到登录页面；

二、先创建一个axios实例

const Axios = axios.create({
    baseURL: HOST,
    timeout: 10000000000,
    responseType: "json",
    withCredentials: true, // 是否允许带cookie这些
    headers: {
      'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',
    }
  });

三、请求拦截器

Axios .interceptors.request.use( config => {
     //在发送请求之前做的一些操作，例如加上token这些
     .......
     return config
}, error => {
     //对请求错误做些什么
     return Promise.reject(error)
})

四、响应拦截器

Axios.interceptors.response.use(response => {
      //接收到响应后要做些什么，比如跳转到登录页
      .......
      return response
}, error => {
     //对响应错误做些什么
     return Promise.reject(error)
})

五、对每个请求方式进行一下封装

export function requestGet(url, query) {
    return Axios.get(url, { params: query || {} })
      .then((res) => {
        return Promise.resolve(res.data)
        console.log(res.data);
      })
  }
 
  export function requestPost(url, data) {
    return Axios.post(url, data)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }
  
  export function requestPut(url, data) {
    return Axios.put(url, data)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }
  
  export function requestDelete(url) {
    return Axios.delete(url)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }