先给出目录结构
http.js文件中对axios进行基础封装
在对axios进行封装前,引入了qs包对data进行处理,因为axios默认post请求时content-type为application/json,而后台需要接收的数据格式为application/x-www-form-urlencoded,这个具体是否修改看你们后台接收数据的方式。
在http.js文件中代码如下
import axios from ‘axios’
// qs 是对 post 请求 data 进行处理,不然后台接收不了数据
// 因为axios post请求默认Content-type是 application/json
import qs from ‘qs’
axios.defaults.timeout = 5000 // 5s没响应则认为该请求失败
axios.defaults.baseURL = ‘后台给出的baseURL’
axios.defaults.withCredentials = true // 跨域时如果要带上cookie话则需要设置withCrendentials
// http request 拦截器 所有请求发出前都需要执行以下代码
axios.interceptors.request.use(
request => {
request.data = qs.stringify(request.data) //这里就用qs对data就行处理
request.headers = {
‘Content-Type’: ‘application/x-www-form-urlencoded’ //设置header覆盖content-type
}
return request
},
error => {
return Promise.reject(error)
}
)
/**
- 封装get方法 跟 post 方法
- @param url
- @param params
- @returns {Promise}
*/
// 这种写法是导出后可以通过在main.js中使用Vue.use(http) 挂载到vue实例上
export default {
install: (Vue) => {
Vue.prototype.
g
e
t
=
(
u
r
l
,
p
a
r
a
m
s
=
)
=
>
r
e
t
u
r
n
n
e
w
P
r
o
m
i
s
e
(
(
r
e
s
o
l
v
e
,
r
e
j
e
c
t
)
=
>
a
x
i
o
s
.
g
e
t
(
u
r
l
,
p
a
r
a
m
s
)
.
t
h
e
n
(
r
e
s
p
o
n
s
e
=
>
r
e
s
o
l
v
e
(
r
e
s
p
o
n
s
e
.
d
a
t
a
)
)
.
c
a
t
c
h
(
e
r
r
o
r
=
>
r
e
j
e
c
t
(
e
r
r
o
r
)
)
)
V
u
e
.
p
r
o
t
o
t
y
p
e
.
get = (url, params = {}) => { return new Promise((resolve, reject) => { axios.get(url, {params}) .then(response => resolve(response.data)) .catch(error => reject(error)) }) } Vue.prototype.
get=(url,params=)=>returnnewPromise((resolve,reject)=>axios.get(url,params).then(response=>resolve(response.data)).catch(error=>reject(error)))Vue.prototype.post = (url, params = {}) => {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => resolve(response.data))
.catch(error => reject(error))
})
}
}
}
在main.js文件下:
import Http from ‘./utils/http’
Vue.use(Http)
1
2
那么在整个项目的任何地方都可以使用this.
g
e
t
/
t
h
i
s
.
get / this.
get/this.post 发请求了!