vue项目中对axios进行二次封装_vue3 axios二次封装

一、axios是什么？
axios是目前前端最流行的ajax请求库
它是一款基于Promise的异步请求库
可以同时运用在前端以及后台
最重要的是它具有请求拦截器和响应拦截器
二、封装步骤
1.下载axios

yarn add axios -S
or
npm i axios -S

1
2
3
4

2.创建文件
为了便于后期的开发和维护，我们一般将请求相关的文件都会放在同一个文件夹当中，在项目开发的过程中，一般会先建立一个api文件夹，里面放置二次封装后的axios和后台的请求接口。在api文件夹里，创建一个文件http.js，对于二次封装的axios都书写在里面

2.1 http.js文件中引入axios

// 引入axios
import axios from 'axios'

1
2
3

2.2 配置接口的默认地址
项目的运行有三个环境，分别是开发环境、测试环境和生产环境，针对不同的环境，我们使用的默认地址可能会有所差异，所以我们需要根据环境变量区分接口的默认地址，所以我们需要结合package.json进行配置

http.js

// 引入axios
import axios from 'axios'

// 根据环境变量区分接口的默认地址
switch (process.env.NODE_ENV) {
    case "production":
        // 生产环境
        axios.defults.baseURL = "http://api.baidu.com.cn"
        break;
    case "test":
        // 测试环境
        axios.defults.baseURL = "http://192.168.20.12:8080"
        break;
    default:
        // 开发环境
        axios.defults.baseURL = "http://127.0.0.1:8000"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "set NODE_ENV=test&&vue-cli-service serve",
    "serve:production": "set NODE_ENV=production&&vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

1
2
3
4
5
6
7
8

配置完成之后，当我们在终端运行不同的命令时，就能够匹配到对应的环境地址，完成了对接口地址的封装
2.3 设置超时时间
在发送请求的时候，会遇到网络波动的问题，导致请求迟迟不能返回，所以我们对axios进行配置请求超时时间，能够提高用户的体验

// 引入axios
import axios from 'axios'
// 安装引入qs
import qs from 'qs'

// 根据环境变量区分接口的默认地址
switch (process.env.NODE_ENV) {
    case "production":
        // 生产环境
        axios.defults.baseURL = "http://api.baidu.com.cn"
        break;
    case "test":
        // 测试环境
        axios.defults.baseURL = "http://192.168.20.12:8080"
        break;
    default:
        // 开发环境
        axios.defults.baseURL = "http://127.0.0.1:8000"
}

// 设置超时时间
axios.defults.timeout = 10000;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.4 配置跨域携带cookie
发送请求的时候，如果需要默认携带cookie，我们可以通过配置withCredentials，可以让请求自动携带凭证

// 是否允许跨域携带凭证
axios.defults.withCredentials = true

1
2
3

2.5 配置请求传递数据的格式

在进行前后台交互的时候，前端通常需要携带一些参数向后台发送请求，所以我们通常要知道后端需要什么样的数据格式，从而在前端请求头中进行相应格式的配置

json格式

// 设置请求传递数据的格式 json
axios.defults.header['Content-Type'] = 'application/json '

1
2
3

x-www-form-urlencoded格式

// 设置请求传递数据的格式 x-www-form-urlencoded 
axios.defults.header['Content-Type'] = 'application/x-www-form-urlencoded'

1
2
3

除了在请求头中配置之外，我们还需要对请求体中的数据进行处理，例如在进行post请求的时候，axios默认会将我们的请求体数据转化成json格式，所以如果后台需要的数据为json格式，可以不进行配置，但是如果后台需要urlencoded格式的数据，则需要借助qs来快速帮助我们进行转码

下载qs

yarn add qs -S
or
npm i qs -S

1
2
3
4

在http.js引入

// 安装引入qs
import qs from 'qs'

1
2
3

配置

// 将post的请求体转化成x-www-form-urlencoded格式
axios.defults.transformRequest = data => qs.stringify(data)

1
2
3

2.6 配置请求拦截器
在使用请求拦截器时，最常用的就是处理token，可以在请求拦截器中，获取到token，并且携带给后端

// 请求拦截器
axios.interceptors.request.use(config => {
    // 获取到token
    let token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config
}, error => {
    return Promise.reject(error)
})

1
2
3
4
5
6
7
8
9
10

2.7 配置响应拦截器
响应拦截器中，一般是对后端发送的数据进行一些操作，我们可以根据后端返回的状态码，结合vue-router```进行路由的切换，例如后端返回404``的时候，可以在响应拦截器中切换到404页面

// 响应拦截器
axios.interceptors.response.use(response => {
    return response.data
}, error => {
    let { response } = error
    if (response) {
        // 服务器返回结果
        switch (response.status) {
            // 当前请求需要用户验证（一般是未登录）
            case 401:
                break;
            // 服务器已经理解请求，但是拒绝执行它（一般是token过期）
            case 403:
                break;
            // 找不到页面
            case 404:
                break;
        }
    } else {
        // 服务器没有返回结果
        if (!window.navigator.onLine) {
            // 断网处理：可以跳转到断网页面
            return
        }
        return Promise.reject(error)
    }
})

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

2.8 对外暴露axios实例

export default axios;

1
2

三、api模块化
在项目开发的过程中，往往会有很多的请求接口，如果我们都将接口写在同一个文件，不利于我们的后期开发和维护，所以，对于api我们采用模块化的方式进行分类管理，这样有利于后期维护。
在api文件夹下创建一个index.js文件和module文件夹，index.js文件就是模块化的中心，我们将所有的api有关的模块最终都聚集到index.js文件当中。在module文件夹下创建home.js模块，代表home页面的相关api。

// 引入axios
import axios from '../http'

// 获取页面数据的接口
function getData() {
    return axios.get('/getData')
}

export default {
    getData
}

1
2
3
4
5
6
7
8
9
10
11
12

再创建一个search.js代表search页面相关的api

// 引入axios
import axios from '../http'

// 搜索商品的接口
function searchData() {
    return axios.post('/searchData', {
        itemId: '001'
    })
}

export default {
    searchData
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

接下来就需要将两个api文件引入到我们的index.js文件当中

// 这里数据请求的唯一入口
import home from './module/home'
import search from './module/search'

export default {
    home,
    search
}

1
2
3
4
5
6
7
8
9

为了方便我们之后开发便捷的发送请求，所以我们可以将index.js文件引入到main.js当中，并且挂载到vue的原型上

import Vue from 'vue'
import App from './App.vue'
// 在Vue入口文件当中引入api入口文件
import api from './index'

Vue.config.productionTip = false
// 将api挂载到Vue原型上
Vue.prototype.$api = api


new Vue({
    render: h => h(App)
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14

当我们在组件内发请求的时候，只需要直接调用即可，不用引入别的相关请求

<template>
  <div class="app">axios二次封装</div>
</template>

<script>
export default {
    methods:{
        getData(){
            this.$api.getData()
        }
    }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14