axios 二次封装

Posted lijianming180

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios 二次封装相关的知识,希望对你有一定的参考价值。

一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等

案例

./service/axios.js

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

* 说明:axios 二次封装
* 参数:type //请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
* apiName //接口地址
* url //接口模块
* options //配置参数,例如传{params={}}
*/

import axios from 'axios'
import api from 'service/apiConfig' //真实接口配置
import store from 'vuexStore/store.js' //引用vuex
import qs from 'qs'
import template from 'url-template'

/** axios基础配置 */
axios.defaults.timeout = 5000;
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'

// http request 拦截器
// 一般设置 token
axios.interceptors.request.use(
config => {
if (localStorage.aynUserToken) {
config.headers.common['X-AIYANGNIU-SIGNATURE'] = localStorage.aynUserToken;
}
return config;
},
err => {
return Promise.reject(err);
}
);

// http response 拦截器
axios.interceptors.response.use(
response => {
if (response.data) {
let code = response.data.code
switch (code) {
case 109: // 109 清除token信息并跳转到登录页面
localStorage.aynUserToken = ''
// vue.$loginVerify()
break;
case 110:
// vue.$roleVerify()
break;
}
}
return response;
},
error => {
if (error.response) {
let status = error.response.status
switch (status) {
case 401: // 109 清除token信息并跳转到登 大专栏  axios 二次封装录页面
localStorage.aynUserToken = ''
// vue.$loginVerify()
break;
}
}
let err = error.response ? (error.response.data || error.response) : (error.message || error)
return Promise.reject(err)
}
);


/* 二次封装 */
export default async(type, apiName, url, data, options) => {

let vm = this
// url拼接
let path = (apiName != '') ? api[apiName] + url : url
// url-template
let UrlTemplate = template.parse(path)
// 格式化地址,若data传入参数是{params:{xx:"xxx",xxx:"xxxx"}}结构的,expand要取{xx:"xxx",xxx:"xxxx"}来格式化url
if (data && data.hasOwnProperty("params")) {
path = UrlTemplate.expand(data.params)
if (!data.params) {
data.params = {}
}
data.params._t = Date.now().toString()
} else {
path = UrlTemplate.expand(data)
if (data) {
data._t = Date.now().toString()
}
}

// 设置 {form: true} post/put data转参数拼接字符串
if (options && options.form) {
let opt = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
// 利用 qs 库的stringify() 方法拼接参数字符串
data = qs.stringify(data)
options === {} ? options.headers = opt.headers : options = opt
}
// axios
await axios[type](path, data, options).then((res) => {
// res.data 才是响应数据
vm.result = res.data
})
return vm.result
}

调用

  • get/delete 传数据 {} 或者 {params}

  • post/put 传输数据 params(对象)

  • 如果是表单提交 {form: true}

1
2
3
4
5
6
7
8
9
10
11
12
13
import res from 'service/axios'

/* 加入进货单、加入采购申请 */
export const AddToCart = (params) => res('post', 'apiItem', '/carts/add', params, {form:true})

/* 获取进货单列表 */
export const GetCartList = () => res('get', 'apiItem', '/carts/list', {})
/* 更新购物车商品数量 */
export const CartUpdate = (params) => res('put','apiItem', '/carts/update/{id}',params, {form:true})

/* 根据购物车记录编号(列表时可批量)删除 */
export const CartDelete = (params) => res('delete','apiItem', '/carts/delete',{params})
...

补充

url-template 库使用

1
2
3
4
5
6
7
8
9
10
var template = require('url-template');

var emailUrl = template.parse('/{email}/{folder}/{id}');

// Returns '/user@domain/test/42'
emailUrl.expand({
email: 'user@domain',
folder: 'test',
id: 42
});

以上是关于axios 二次封装的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

vue中axios的二次封装

axios 二次封装

vue项目中对axios的二次封装

基于axios的二次封装

react axios的二次封装