axios封装简明的request请求

最新推荐文章于 2025-07-07 15:39:07 发布

原创最新推荐文章于 2025-07-07 15:39:07 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#axios #request封装

前端开发同时被 3 个专栏收录

26 篇文章

订阅专栏

Vue

22 篇文章

订阅专栏

React

10 篇文章

订阅专栏

本文介绍如何在Vue项目中封装Axios库进行HTTP请求，包括请求和响应拦截器的设置，错误处理及状态码判断，确保请求携带token并实现token过期后的跳转登录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面以Vue为例来封装request请求

request.js:

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
import store from '@/store'
import router from '../router'

const service = axios.create({
  baseURL: window.baseUrl, // api的base_url
  timeout: 10000 // 请求超时设置
})

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code === 10000) {
      // 成功回调
      return Promise.resolve(res)
    } else {
      if (res.code === 10004) {
        // token 过期
        router.replace({ path: '/login' })
      }
      Message({
        message: res.msg,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject(res)
    }
  },
  error => {
    Message({
      message: error.msg,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

export default service