废话

我们为什么要封装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"); // 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文件都需要修改了，这就是解耦，降低耦合度