基于 axios 封装一个简单的网络请求 原创 精华
xjjFeRookie
发布于 2022-5-24 17:59
浏览
2收藏
一、什么是 axios
简单来说,axios
是一个基于promise
的 HTTP 客户端,用于 node.js 和浏览器。
特性
- 从浏览器中创建
XMLHttpRequests
- 从
node.js
创建http
请求 - 支持
Promise
API - 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
基本使用
安装
引入
使用
二、封装网络请求
为什么要进行封装?假设每发起一次HTTP
请求,就要将超时时间、请求头、请求地址、错误处理等这些重复的操作都写一遍,不仅浪费时间,维护性也不好。
所以我们应该对axios
进行封装
1. 设置 baseURL 或配置代理
在本地调试时,可能需要在vue.config.js
中配置代理
2. 设置请求头和超时时间
新建一个 axios.js 文件,将此步骤和3、4、5步的代码复制到里面
3. 请求拦截器
请求拦截器可以给每个请求加上 token
4. 响应拦截器
响应拦截器可以在接收到响应后对数据进行处理后再返回,如根据状态码判断登录状态、授权
5. 导出
6. 创建一个 api.js 文件
创建一个 api.js 文件并引入第 5 步导出的 axios 实例 request
7. 页面中调用
这样就可以对网络请求进行统一管理了,以后维护修改只需要在api.js
文件中操作就行了
三、小结
- 封装是很好的编程思想,简单的
axios
封装,就可以大大加快开发效率; - 如果对上面的封装不够满意,可以在此基础上进行修改,合适自己项目的才是最好的
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
赞
11
收藏 2
回复
11
3
2
相关推荐
逻辑清晰,赞一个~
学到了
非常实用