vue中的请求拦截器与响应拦截器的使用

请求拦截器：
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，每次请求携带token传给后端，统一做处理。
响应拦截器：
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态token失效，需要重新登录的时候，跳转到登录页，对不同状态码做不同处理。

```
import axios from 'axios'
 
//初始化axios
const service = axios.create({
  baseURL: '请求地址',
  withCredentials: true, //跨域请求时发送cookies
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  // timeout: 10000 // 请求超时
})
 
//请求拦截器
service.interceptors.request.use(
  config => {
    // 判断是否存在token,把token添加点请求头中，每次请求携带token传给后端
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    //处理错误请求
    return Promise.reject(error)
  }
)
//响应拦截器
service.interceptors.response.use(
    response=> {
        const res = response.data
        if (res.code !== 200) {
            //请求失败（包括token失效，302，404...根据和后端约定好的状态码做出不同的处理）
            return res
        }else{
            //请求成功
            return res
        }
    }
    return config
  },
  error => {
    //处理错误响应
    return Promise.reject(error)
  }
)
 
export default service
```

vue中的请求拦截器与响应拦截器的使用

添加新评论

关于博主

文章分类

最受欢迎的文章

最近回复

其它