axios拦截器

Axios封装与拦截器实战

最新推荐文章于 2025-09-15 08:42:23 发布

原创最新推荐文章于 2025-09-15 08:42:23 发布 · 261 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#axios #axios拦截器 #axios请求拦截器 #axios响应拦截器 #axios二次封装

axios 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中封装Axios库，并利用请求和响应拦截器实现自动登录状态检查与错误处理，确保前后端交互的高效与安全。

在src目录下的http目录创建一个index.js文件

/*
 * 文件路径 src/http/index
 */

import axios from "axios";  //引入axios

创建一个axios实例

let http = axios.create({
  timeout: 300000
})

请求拦截器

请求拦截器会在你发送请求之前运行，一般根据是否存在token在请求头上加上token，将token传给后端，后端根据token判断登录是否过期

// request 拦截器
http.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个请求头加上token
      config.headers.authorization = token 
    }
    return config
  },
  error => {
    return Promise.reject(error)
  })

响应拦截器

很对网站过一段时间之后就会重新登录，如果在每个接口都判断登录是否失效重复代码太多，而且麻烦，用响应拦截器可以做统一处理，方便很多

// response 拦截器
http.interceptors.response.use(
  response => {
    //判断登录是否失效，做统一处理 
    if (response.data.code) {
      switch (response.data.code) {
        case 403:
          store.state.isLogin = false
          //不会向 history 添加新记录，而是替换掉当前的 history 记录
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
  },
  error => {
    return Promise.reject(error.response.msg) // 返回接口返回的错误信息
  })

最后把实例导出就行了

export default http

在需要的页面导入就可以使用了

/* 文件路径 src/http/user*/
import http from '@/http/index'

/* 获取用户信息 */
export function userInfor (data) {
  return http.post('/v1/user', data)
}

在组件中使用接口返回数据

import { userInfor} from '@/http/user'

export default {
  data() {
    return {}
  },
  created() {
    let params = {id:666}
    userInfor(params).then(
        res => {
          console.log('接口数据', res.data.data)
        },
        error=> {
          console.log('error', error)
        }
      )
  }
}