Axios如何封装?
发表于 2021-07-10 | 更新于 2022-05-27
总字数: 613 | 阅读时长: 2分钟 | 阅读量: 0
废话
我们为什么要封装axios呢?
如果我写的项目了用到了大量的请求,就会用到请求数据的第三方库,axios
、request
等
大部分情况下都是以模块化开发的形式进行编码,产生了很多个js文件
如果我每个js文件了都需要用到axios
请求数据,这样axios和我写的代码耦合度太高
假设如果某一天,我抛弃了axios,转用了request
,那么就会出现一个非常严重的问题
我需要打开所有用到axios的js文件,进行修改其中的axios代码
(如果有几十,上百个,我这不改的岂不是很费解?而且都是重复性高,没有任何价值的浪费时间)
就是因为在项目的设计之初没有做好相关的问题分析导致的悲剧(axios与项目的耦合度过高,我们该如何降低耦合度呢?封装!)
正文
安装axios
1
| npm install axios --save
|
引入axios(任选其一)
1 2
| const axios = require("axios"); import axios from "axios";
|
封装axios完整代码(request.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| const axios = require("axios");
module.exports = { async request(data) { const instance = axios.create() instance.interceptors.response.use(res => { return res.data }) return instance(data) } }
|
在业务代码中使用封装后的axios
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| const request = require("./request");
const url = 'http://127.0.0.1:8080/user?username=admin&password=admin' request(url).then(data=>{ console.log(data) })
const url = 'http://127.0.0.1:8080/user?username=admin&password=admin' request({ method: 'post', url: url, data:{ username:'admin', password:'admin' } }) .then(data=>{ console.log(data) })
const url = 'http://127.0.0.1:8080/user' request({ method: 'post', url: url, data:{ username:'admin', password:'admin' } }) .then(data=>{ console.log(data) })
|
如果有哪一天我抛弃了aoxis转用request了,我就只需要修改request.js
文件即可,就不用每个js文件都需要修改了,这就是解耦,降低耦合度