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

最新推荐文章于 2024-12-04 10:16:53 发布

无来往

最新推荐文章于 2024-12-04 10:16:53 发布

阅读量2.6w

点赞数 4

分类专栏：前端 React 文章标签： Vue React axios 封装 service

本文链接：https://blog.csdn.net/frank_come/article/details/80010611

版权

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

摘要由CSDN通过智能技术生成

日结博客 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([

最低0.47元/天解锁文章