0%

axios封装


vue中也推荐使用axios来调数据

新建一个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
/* 配置axios拦截器 */
import axios from 'axios'
import router from '@/router'

// 创建axios实例
const service = axios.create({
//baseURL: process.env.BASE_API, // api的base_url
timeout: 60000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
// 假如有Tn,就加入
if (getToken()) {
config.headers['tn'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
//console.log(error) // for debug
Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(response => {
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/

return response
}, error => {
var errorObj = {
message: 'c1000',
data: []
}

if (error && error.response) {
switch (error.response.status) {
case 400: errorObj.message = '(c1400)' ; break; // 请求错误
case 401: errorObj.message = '(c1401)'; break; // 未授权
case 403: errorObj.message = '(c1403)'; break; // 拒绝访问
case 404: errorObj.message = '(c1404)'; break; // 请求出错
case 408: errorObj.message = '(c1408)'; break; // 请求超时
case 500: errorObj.message = '(c1500)'; break; // 服务器错误
case 501: errorObj.message = '(c1501)'; break; // 服务未实现
case 502: errorObj.message = '(c1502)'; break; // 网络错误
case 503: errorObj.message = '(c1503)'; break; // 服务不可用
case 504: errorObj.message = '(c1504)'; break; // 网络超时
case 505: errorObj.message = '(c1505)'; break; // HTTP版本不受支持
default: errorObj.message = `连接出错(${error.response.status})!`; // 连接出错
}
}else{
errorObj.message = '(c3289)'
}

Notice.error({
title: '网络繁忙,请稍后再试' + errorObj.message,
duration: 5
});
// Do something with request error
//console.log(error) // for debug
Promise.reject(error)
return errorObj
})

export default service

在 store 中 新建一个 request.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
/* 请求后台接口数据模块*/
import request from '@/util/axios'

var state = {}

var mutations = {}

var getters = {}

var actions = {
// action只接受一个参数,所以url与请求参数需要放在一个对象里面

//post请求
Post({ commit, state },obj){
return new Promise((resolve, reject) => {
request({
url: obj.url,
method: 'post',
data: obj.PostData
}).then(response => {
resolve(response.data)
})
});
},

//get请求
Get({ commit, state },obj){
return new Promise((resolve, reject) => {
request({
url: obj.url,
method: 'get',
params: obj.PostData,
}).then(response => {
resolve(response.data)
})
});
},

}

//将这些对象引入后导出到总的状态管理当中
export default {
state,
mutations,
getters,
actions
}

使用的时候直接派发

1
2
3
4
5
6
7
8
let sendMessage = {
url: this.$api.List,
PostData: {}
}

this.$store.dispatch('Post', sendMessage).then((data) => {

})

可能遇到的问题

发送的数据后端收不到…

解决方案引入qs库

npm install qs --save

在main.js中

1
2
3
import qs from 'qs'
/* 注入vue全局中,这样我们可以在组件内或者JS内通过使用this.$qs来使用qs库*/
Vue.prototype.$qs = qs

使用的时候,用qs包裹住参数

1
this.$qs.stringify(data)

问题解决了,我们来看一下是为什么

在之前公司做项目时,也是用axios发送的数据,且并未修改过什么东西,但是为什么现在后端接收不到我们的json类型的参数呢?

通过翻看axios的文档得知:在axios使用Post发送数据时,默认是直接把json放到请求体中提交到后端的,而后端获取数据的方式有两种,一种是@RequestParam(通过字符串中解析出参数),另一种是@ResponseBody(从请求体中取参数),很显然,后端用了第一种方式。

那么,既然知道了原因,兄弟们,懒得改前端代码的话,就怼回去吧( ‵▽′)ψ

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~