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

请求拦截器

 //在发送请求之前做的一些操作，例如加上token
Axios .interceptors.request.use( config => {  
     // 为请求头对象添加 token 验证的 Authorization 字段
     config.headers.Authorization = window.sessionStorage.getItem('token')
     return config
}, error => {
     //对请求错误做些什么
     return Promise.reject(error)
})

响应拦截器

//接收到响应后要做些什么，比如跳转到登录页
Axios.interceptors.response.use(response => {
	response => {
    //拦截响应，做统一处理 
    if (response.data.code) {
      switch (response.data.code) {
        case 1002:
          store.state.isLogin = false
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    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)
      })
  }

应用

最后把封装的实例在需要的地方导入就可以了。