React、Vue 封装axios实践

最新推荐文章于 2025-06-14 14:39:44 发布

Alecor

最新推荐文章于 2025-06-14 14:39:44 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue篇

本文链接：https://blog.youkuaiyun.com/Alecor/article/details/87198297

Vue篇专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在React和Vue项目中统一配置axios，包括安装、全局配置、请求与响应拦截器的设置，以及如何在业务API中调用axios。

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

目前在使用前端主流的三大框架 Angular、React和Vue时，都可以配合着axios一起使用，我自己在构建React和Vue项目时候，都是使用同一套axios配置，我这里就把自己配置的方法记录一下；

安装

npm 安装 axios，我自己是基于npm创建React和Vue项目的，用法很简单，两个框架安装的语句是一样的。

npm install axios --save

配置axios

新建axios的全局配置文件，我个人起名为：request.js，这个文件可以看作是一个工具类，存放的位置看项目具体的结构，个人习惯放在 util目录下

在util目录下（自己可以切换目录），创建 request.js文件

// 引入axios
import axios from 'axios'


// 创建axios实例
const service = axios.create({
  baseURL: 'localhost', // api的base_url  Vue项目可以根据 process.env.BASE_API，React可以在这里定义
  timeout: 50000, // 请求超时时间
  withCredentials: true, // 跨域携带cookie
  xsrfCookieName: 'xsrf-token'  //当创建实例的时候配置默认配置
})  


// 添加请求拦截器，这里面可以配置一下每次请求都需要携带的参数，比如 token，timestamp等等，根据项目自己配置
service.interceptors.request.use(
  function(config) {
    // 每次请求带上token和用户编号
    // if (store.getters.token) {
    // config.headers['Token'] = getToken()
    // config.headers['Authorization'] = store.getters.userId
    // }
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    // 每次请求带上时间戳 防刷处理
    if (config.method === 'get' || config.method === 'delete') {
      config.params = {
        ...config.params,
        timestamp: Date.parse(new Date()) / 1000
      }
    } else if (config.method === 'post' || config.method === 'put') {
      config.data = {
        ...config.data,
        timestamp: Date.parse(new Date()) / 1000
      }
    } else {
      config.data = {
        ...config.data,
        timestamp: Date.parse(new Date()) / 1000
      }
    }
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)


// 添加响应拦截器 ，这里的 response是接收服务器返回后的结果，也可以在这里做一些状态判断
service.interceptors.response.use(
  response => {
    /**
     * 判断服务器请求是否成功
     * @method if
     * @param  {[type]} response [description]
     * @return {[type]}          [description]
     */
    if (response.status !== 200) {
      return Promise.reject(new Error('网络异常，请稍后重试'))
    }
    const res = response.data
    if (res.success) {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)
// 提供axios给外部调用
export default service

支持，axios的核心配置已经配置完了，接下来，在独立的api请求文件中调用即可，我用自己的项目举例

配置业务api

// 引入文件
import request from '@/utils/request'

/**
 *  获取所有的权限
 * @method getAllPermission
 * @return {[type]}         [description]
 */
export function getAllPermissionList() {
  return request({
    url: '/permissions',
    method: 'get',
    params: {
      'page_size': 9999
    }
  })
}

api调用

Vue项目或React项目
...
import { getAllPermissionList } from './util/permissionApi'

然后在函数里面调用就可以；