项目中对于 axios 发送 Ajax 请求框架的二次封装使用

最新推荐文章于 2025-06-08 16:51:26 发布

原创最新推荐文章于 2025-06-08 16:51:26 发布 · 575 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

本文介绍了在项目中对axios进行二次封装的过程，包括设置基地址、添加请求和响应拦截器，以及如何处理请求错误，特别是401未授权的情况。通过封装，实现了统一的接口调用方法，简化了API调用的代码。

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

axios 二次封装

在使用框架开发项目的时候，发送请求使用最多的就是 axios 框架，用法上其实跟 Ajax 类似，但是一般都会在使用的时候对他进行二次封装。这样可以统一配置一些信息，比如基地址、请求拦截、响应拦截等

好了废话不多说，看代码

封装 utils 目录下的 request.js

// 通用接口调用模块
import axios from 'axios'

// 接口调用基准路径
export const baseURL = ''

// 创建一个独立的实例对象
const instance = axios.create({
  baseURL: baseURL
})

// 响应拦截器
instance.interceptors.response.use(res => {
  // 把返回的数据去掉一层data属性
  return res.data
}, err => {
  // 处理token实现的问题
  if (err.response && err.response.status === 401) {
    // token失效了，跳转到登录页
    return router.push('/login')
  }
  return Promise.reject(err)
})
// 请求拦截器
instance.interceptors.request.use(config => {
  // 统一添加请求头
  const token = store.state.user.profile.token
  if (token) {
    // 已经登录成功，统一添加token
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})

// 封装通用的接口调用方法
export default (options) => {
  return instance({
    method: options.method || 'GET',
    url: options.url,
    // ES6规则：对象的key可以是动态的变量
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}

使用

import request from './request'

request({
    url: '...',
    method: 'GET',
    data: {...}
})