api封装，封装api 这么多年都不和别人说的秘技，超好用，简单只需2步
api封装，封装api 这么多年都不和别人说的秘技，超好用，简单只需2步
第一步：在src下面新建utils文件夹，新建个request.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改
import store from '../store'
**封装api，能有啥秘技，就皮一下，吼，很开心**
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
/* baseURL: window.glod.baseApi, // api 的 base_url*/
timeout: 50000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
// config.headers['Content-Type'] = 'application/json'
if (store.getters.token) {
config.headers['Authorization'] = 'Bearer ' + store.getters.token
// 让每个请求携带自定义token 请根据实际情况自行修改
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
/**
* code为201-206的暂时定为正确 可结合自己业务进行修改
*/
const res = response
if (res.status < 200 || res.status > 299) {
Message({
message: res.statusText,
type: 'error',
duration: 5 * 1000
})
if (res.status === 401 || res.status === 403) {
MessageBox.confirm(
'你已被登出，可以取消继续留在该页面，或者重新登录',
'确定登出',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('oidc/signOutOidc');
})
}
return Promise.reject('error')
} else {
return response.data
}
},
error => {
if (error.response) {
Message({
message: error.response.data.error.details,
type: 'error',
duration: 5 * 1000
})
console.log('err' + error.response.data) // for debug
} else {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
console.log('err' + error.message) // for debug
}
return Promise.reject(error)
}
)
export default service
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
第二步：在src下面新建api文件夹，新建api.js
import request from "@/utils/request";
import qs from 'qs' //qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。npm install qs
// get请求方式
export function getConsumeByPhone(query) {
return request({
url: `/v1_consume/getConsumeByPhone`,
method: "get",
params: query
});
}
// post请求方式
export function addLeaveMessage(query) {
return request({
url: `/v2_leave/addLeaveMessage`,
method: "post",
data: qs.stringify(query),
});
}
//delete请求方式
export function deleteByIdCard(id) {
return request({
url: `/card/deleteById/${id.id}/${id.updater}`,
method: "delete"
});
}
//下面说说data数据上传
//当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串
（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个
新的url。
export function getOpenId(query) {
return request({
url: `/v1_auth/getOpenId`,
method: "post",
data: qs.stringify(query),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
// data上传2
export function getCode(query) {
return request({
headers: {
'Content-Type': 'application/json'
},
url: `/v1_global/getCode`,
method: "post",
data: qs.stringify(query),
});
}
// **当action为post时候，浏览器把form数据封装到http body中，然后发送到server。
如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。
但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件
为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type
(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。**
export function upload(query) {
return request({
headers: {
'Content-Type': 'multipart/form-data'
},
url: `v1_global/upload`,
method: "post",
data: query
});
}
// data上传4
export function uploadFace(query) {
return request({
headers: {
'Content-Type': 'applic/v1_pFace/uploadFace'
},
url: `/v1_pFace/uploadFace`,
method: "post",
data: query
});
}
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
import { uploadFace } from ‘@/api/api’ vue语法其他页面使用方式! || echarts
上传二进制数据;它告诉我们传输的数据要用到多媒体传输协议，由于多媒体传输的都是大量的数据，所以规定上传文件必须是post方法，的type属性必须是file。form里面的input的值以2进制的方式传过去，所以request就得不到值了。传输到你的servlet里是二进制数据，包括那个title，所以你用request.getParameter(“title”)是得不到值的，必须把数据再换为String的。
————————————————
版权声明：本文为CSDN博主「可 乐 伢」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_56947857/article/details/115908520