一般项目往往要对 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 二次封装的更多相关文章

  1. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  2. 【vue】axios二次封装,更好的管理api接口和使用

    在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...

  3. axios二次封装的几种方法

    一.用Class方法 import axios from "axios"; declare var Promise: any; export class Request { sta ...

  4. axios二次封装

    import axios from "axios" //请求拦截器 axios.interceptors.request.use(function (config) { retur ...

  5. 【uni-app】uni.request二次封装,更好的管理api接口和使用

    前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...

  6. vue项目中对axios的二次封装

    近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...

  7. vue中axios的二次封装

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...

  8. Vue:对axios进行简单的二次封装

    主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...

  9. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

随机推荐

  1. win10 编译好的CPU版本caffe 配置自己的图像分类C++DEMO

    VC++目录 包含目录 F:\caffewindows\scripts\build\include F:\caffewindows\scripts\build F:\vs2015\VC\include ...

  2. Matlab高级教程_第一篇:Matlab基础知识提炼_05

    第九节:矩阵的操作 第十节:数组与矩阵 linspace函数

  3. LFW Face Database下载

    http://vis-www.cs.umass.edu/lfw/ Download the database: All images as gzipped tar file (173MB, md5su ...

  4. @ResponseBody与@RestController

    @ResponseBody与@RestController的作用与区别 https://blog.csdn.net/xfl4629712/article/details/78528387

  5. 吴裕雄--天生自然 pythonTensorFlow自然语言处理:Attention模型--训练

    import tensorflow as tf # 1.参数设置. # 假设输入数据已经转换成了单词编号的格式. SRC_TRAIN_DATA = "F:\\TensorFlowGoogle ...

  6. Spring Boot从入门到放弃-Spring Boot 整合测试

    站长资讯摘要:使用Spring Boot 整合测试,对Controller 中某个方法进行测试或者对Service,Mapper等进行测试,不需要运行项目即可查看运行结果是否和期望值相同,Spring ...

  7. TPO1-2 The Origin of Theater

    Stories (myths) may then grow up around a ritual. Frequently the myths include representatives of th ...

  8. java gc 总结

    垃圾查找 1.基于计数器 对象有引用计数,计数为0的,可以被收集 2.基于有向图 从gc root(栈.静态变量.JNI 变量)遍历,能访问的对象,不用被收集,其他的,可以被收集 因为计数器不能解决 ...

  9. HDU-4553 约会安排(线段树维护连续区间)

    http://acm.hdu.edu.cn/showproblem.php?pid=4553 Problem Description 寒假来了,又到了小明和女神们约会的季节.  小明虽为屌丝级码农,但 ...

  10. mybatis处理LIKE模糊查询字符串拼接

    -- 最佳实践 <select id="getSealByMap" parameterType="map" resultType="map&qu ...