涉及点:
1、axios官方文档(axios安装、请求拦截器、响应拦截器、axios请求配置选项)
2、promise使用 (resolve、reject、.then、.catch)
3、函数封装,全局使用
本文封装理念:单独封装一个axios模块文件,并将其挂在至main.js中,供全局使用
步骤1:npm安装axios至当前项目中,如下
npm install axios --save
1
步骤2:新建项目目录如下,主要涉及:
~直接上代码~
1
config.js文件
// axios中请求配置有baseURL选项,表示请求URL公共部分。
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL
export const baseURL = 'http://XXXXXXXX.com/'
1
2
3
4
5
axios.js文件
import axios from 'axios'
import qs from 'qs'
// 在config.js文件中统一存放一些公共常量,方便之后维护
import { baseURL } from './config.js'
// 添加请求拦截器,在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
axios.interceptors.request.use(function (config) {
// 显示loading
return config
}, function (error) {
// 请求错误时弹框提示,或做些其他事
return Promise.reject(error)
})
// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么,允许在数据返回客户端前,修改响应的数据
// 如果只需要返回体中数据,则如下,如果需要全部,则 return response 即可
return response.data
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
// 封装数据返回失败提示函数---------------------------------------------------------------------------
function errorState (response) {
// 隐藏loading
// 如果http状态码正常,则直接返回数据
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
// 如果不需要除了data之外的数据,可以直接 return response.data
return response
} else {
alert('数据获取错误')
}
}
// 封装数据返回成功提示函数---------------------------------------------------------------------------
function successState (res) {
// 隐藏loading
// 统一判断后端返回的错误码(错误码与后台协商而定)
if (res.data.code === '000000') {
alert('success')
return res
}
}
// 封装axios--------------------------------------------------------------------------------------
function apiAxios (method, url, params) {
let httpDefault = {
method: method,
baseURL: baseURL,
url: url,
// `params` 是即将与请求一起发送的 URL 参数
// `data` 是作为请求主体被发送的数据
params: method === 'GET' || method === 'DELETE' ? params : null,
data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
timeout: 10000
}
// 注意**Promise**使用(Promise首字母大写)
return new Promise((resolve, reject) => {
axios(httpDefault)
// 此处的.then属于axios
.then((res) => {
successState(res)
resolve(res)
}).catch((response) => {
errorState(response)
reject(response)
})
})
}
// 输出函数getAxios、postAxios、putAxios、delectAxios,供其他文件调用-----------------------------
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
export default {
install: function (Vue) {
Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
}
}
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
注意:发送请求时params和data的区别
– 在使用axios时,注意到配置选项中包含params和data两者,他们使用场景不同。
params是添加到url的请求字符串中的,用于get请求。
data是添加到请求体(body)中的,用于post请求。
比如对于下面的get请求:
axios.get('/user', {
params: {
ID: 12345
}
})
1
2
3
4
5
6
如果我们将params修改为data,显然是不能请求成功的,因为get请求中不存在data这个选项。
番外篇:如果不需要全局使用,输出函数时,代码如下(全局使用者,请忽略)
// 注:如果上述export default是如下写法,则不需要再mian.js中引入,直接在需要使用的文件中import,并使用即可。例如用axios.get()调用get方法;
export default {
get: (method, url, params) => apiAxios('get', url, params),
post: (method, url, params) => apiAxios('post', url, params)
}
1
2
3
4
5
main.js文件
// 在main.js中引入axios.js文件,并Vue.use()使用---------------------------------------
1
在需要使用的文件中直接使用 this.axios文件中输出的函数名(例如this.getAxios),例如:
end~
---------------------
作者:非为000
来源:CSDN
原文:https://blog.csdn.net/qq_30669833/article/details/81701588
版权声明:本文为博主原创文章,转载请附上博文链接!