二次封装axios请求(React、Vue皆可使用)

最新推荐文章于 2025-07-13 11:06:19 发布

原创

最新推荐文章于 2025-07-13 11:06:19 发布 · 2.7w 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #React #axios #封装 #service

本文介绍了如何通过封装axios来解决React和Vue项目中API调用的繁琐问题。作者提供了详细的步骤，包括创建http.js设置默认URL、配置请求拦截和响应拦截，以及在service文件夹中组织接口方法。通过这种方式，可以更方便地管理和调用API，提高代码的可维护性。在Vue和React页面中引用封装后的service，能更简洁地进行数据请求。

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

日结博客 04.19.18 HZ

对于每次都要从页面导入axios和配置路径的行为简直没完没了地厌恶，每次后台修改api地址都得从一大堆页面里寻找到那小小的一个axios.get，简直深恶痛绝

请封装吧，万物皆能封装，封装治好了你多年的眼疾

封装更合理的Axios操作类

1.导入axios至你的项目

npm install --save axios

2.在根路径创建http.js

首先导入axios至http文件


import axios from 'axios'import axios from 'axios'

配置axios的默认URL

axios.defauls.baseURL = 'xxx'

配置允许跨域携带cookie

axios.defaults.withCredentials = true

配置超时时间

axios.defaults.timeout = 100000

标识这是一个 ajax 请求


axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

配置请求拦截

 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
    config.setHeaders([
     &nb