2022-02-14 axios的二次封装

前端OnTheRun

已于 2022-11-10 18:41:03 修改

阅读量319

点赞数

分类专栏：笔记 axios 文章标签： javascript 前端开发语言

于 2022-02-14 22:27:52 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/122933394

版权

本文探讨了在前端开发中对axios进行二次封装的原因和场景，包括利用请求和响应拦截器，以及为了便于接口管理和维护。同时，通过示例介绍了如何创建api/request.js文件进行封装，并展示了如何在api/index.js中统一管理接口，以及封装带token控制的get和post请求。

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

1.对axios进行二次封装的场景

主要是要用到请求拦截器和响应拦截器;

请求拦截器：可以在发请求之前可以处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

2.axios二次封装的目的?

二次封装axios是为了方便我们后续项目的使用,
对api进行同一管理,不管接口有多少,可以让接口变得清晰和容易维护

如果页面非常的少,可以直接用axios不用二次封装,
如果页面组件一旦多了起来,上百个接口,后端改了接口,多加了一个参数,
只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.

3.axios的原理，基于什么实现的?

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios还是属于 XMLHttpRequest，因此需要实现一个ajax；
还需要一个promise对象来对结果进行处理。

4.示例一:创建api/request.js用于书写axios二次封装的代码

import axios from "axios"//导入axios
//1.利用axios对象的create方法创建一个axios实例
const requests=axios.create({
   
	//配置对象
	baseURL:"./api",//基础路径
	timeout:5000//请求时间
});
//2.请求拦截器:发送请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情
requests.interceptors.request.use(config=>{
   
	re