Axios中拦截器的使用

398 字

2 分钟

Axios中拦截器的使用

2025-07-06

Vue

前言#

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，在使用Axios时候，一般我们会进行一定的封装，Axios拦截器分为请求拦截器和相应拦截器，请求拦截器主要的作用是在请求后端接口前，携带Token信息，而响应拦截器的主要作用是对后端的状态码进行校验，跳转到对应的页面

创建Axios对象#

这里主要就是填写baseURL 以及超时时间 timeout

1
import axios from 'axios'
2

3
// 创建axios实例
4
const service = axios.create({
5
  baseURL: '', // api 的 base_url
6
  timeout: 10000 // 请求超时时间 10秒
7
})

Request拦截器#

即请求拦截器，我们在请求后端接口的时候，将token放入请求头中

1
// request拦截器
2
service.interceptors.request.use(
3
  config => {
4
    if (getCookie("token") != undefined) {
5
      config.headers.Authorization = getCookie("token") // 让每个请求携带自定义token 请根据实际情况自行修改
6
    }
7
    return config
8
  },
9
  error => {
10
    // Do something with request error
11
    console.log(error) // for debug
12
    Promise.reject(error)
13
  }
14
)

Response拦截器#

1
service.interceptors.response.use(
2
  response => {
3
    // return response.data
4
    const res = response.data
5
    if (res.code === 'success' || res.code === 'error') {
6
      return res
7
    } else if (res.code === 401 || res.code === 400) {
8
      console.log('返回错误内容', res)
9
      router.push('404')
10
      return res
11
    } else if (res.code === 500) {
12
      return Promise.reject('error')
13
    }
14
  },
15
  error => {
16
    // 出现网络超时
17
    router.push('401')
18
    return Promise.reject(error)
19
  }
20
)