app开发定制为什么要二次封装axios？

axiosapp开发定制是一个基于promiseapp开发定制的网络请求库，app开发定制可以方便我们进行网络请求。
app开发定制二次封装好处：便于我们更好的管理我们的接口，不至于请求接口很多的情况下，出现混乱。
此处，我们针对vue项目来进行我们的axios二次封装。

代码

// 先安装并导入我们的axios库import axios from 'axios';
1
2

vue的配置项需要我们对生产环境、开发环境、测试环境的配置，具体配置如下步骤

*在vue项目里面：在package.json里的scripts里面进行配置，生产环境，开发环境，和测试环境*生产环境配置："serve:prodocution": "set NODE_ENV=prodocution&&vue-cli-service serve"*测试环境配置："serve:test": "set NODE_ENV=test&&vue-cli-service serve"*开发环境："serve":"vue-cli-service serve"
1
2
3
4

在不同环境下进行对后台接口的选择：

switch (process.env.NODE_ENV) {    // 生产环境下请求的地址，这里的api地址是随便写的，真实的api为你们手里的    case "prodocution":        axios.defaults.baseURL = "http://api.hahahha.com";        break;    // 测试环境的后台api    case "test":        axios.defaults.bassURL = "http://heihie.com";        break;    // 开发环境下的后台api    default:        axios.defaults.baseURL = "http://localhost";        break;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

设置两个重要的配置项：请求时间和资源凭证

// 设置请求超时的时间axios.defaults.timeout = 10000;// 设置CORS跨域允许携带资源凭证axios.defaults.withCredentials = true;
1
2
3
4

设置请求头数据的格式（看服务器是什么格式，这里是设置的是x-www-form-urlencoded这种格式）：

axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded';// 将我们请求的数据转为x-www-form-urlencoded格式，qs是node的一个内置模块，是将我们的data转换为-www-form-urlencoded格式axios.defaults.transformRequest = data => qs.stringify(data);
1
2
3

设置请求头拦截器，具体一些说明在注释中

/**设置请求拦截器*客户端发送请求 => 【请求拦截器】 => 服务端接收*token校验(jwt)：接收到服务器返回的token，将他保存在vuex/本地存储里边，*每一次请求的时候都应该给token带上*/axios.interceptors.request.use(config => {    // 假设我们把token存储到本地存储中的    let token = localStorage.getItem("token");    // token 如果存在就加在配置项的头部    token && (config.headers.Authorization = token);    // 一定要返回配置项    return config;}, error => {    return Promise.reject(error);})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

设置响应拦截器，具体一些说明在注释里

/**响应拦截器*服务器返回信息 -> 【拦截的统一处理】   ->  客户端js获取到信息*/// axios.defaults.validateStatus = state => {//     // 自定义响应成功的状态码//     let reg = /^(2|3)\d{2}$/;//     return reg.test(state);// }axios.interceptors.response(response => {	// 如果回应了就直接return出去    return response.data;}, error => {	// 令失败的响应为error    let {        response    } = error;    // 如果存在服务器响应    if (response) {        // =>服务器最起码返回结果了        switch(response.status){            case 401: // =>权限 未登录状态            	// 这里可以做一些401的操作                break;            case 403: // => 服务器拒绝执行（token过期）            	// 这里可以做一些状态码为403的操作                break;            case 404: // => 找不到页面            	// 这里可以做一些状态码为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
29
30
31
32
33
34
35
36
37
38
39
40
41

最后导出我们的axios

export default axios;
1

总结，二次封装过后的axios可以满足我们在特定需求下进行网络的请求，写的可能不怎么好，大家一起学习，一起进步，谢谢大家！~~