废话

我们为什么要封装axios呢?

如果我写的项目了用到了大量的请求,就会用到请求数据的第三方库,axiosrequest
大部分情况下都是以模块化开发的形式进行编码,产生了很多个js文件
如果我每个js文件了都需要用到axios请求数据,这样axios和我写的代码耦合度太高
假设如果某一天,我抛弃了axios,转用了request,那么就会出现一个非常严重的问题
我需要打开所有用到axios的js文件,进行修改其中的axios代码
(如果有几十,上百个,我这不改的岂不是很费解?而且都是重复性高,没有任何价值的浪费时间)
就是因为在项目的设计之初没有做好相关的问题分析导致的悲剧(axios与项目的耦合度过高,我们该如何降低耦合度呢?封装!)

正文

安装axios

1
npm install axios --save

引入axios(任选其一)

1
2
const axios = require("axios"); // commonjs
import axios from "axios"; // es6

封装axios完整代码(request.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 引入axios
const axios = require("axios");

// 暴露request()方法
module.exports = {
async request(data) {
//创建axios实例
const instance = axios.create()
// 拦截器(处理axios返回的直接是请求数据,而不是要经过response.data获取数据)
// 拦截器:当axios响应数据返回时,需要对数据进行加工的方法
instance.interceptors.response.use(res => {
return res.data
})
// 返回实例,返回的是一个promise
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
// 引入封装好的axios
const request = require("./request");

// 默认axios是get请求
const url = 'http://127.0.0.1:8080/user?username=admin&password=admin'
request(url).then(data=>{
console.log(data) // 即可直接获取数据了
})

// get
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) // 即可直接获取数据了
})

// post
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文件都需要修改了,这就是解耦,降低耦合度

文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/axios-packaging.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论
目录 0%