关于使用axios的一些心得技巧分享
来源:互联网 发布:赵泓霖的网络课100节 编辑:程序博客网 时间:2024/06/04 19:47
本文主要跟大家介绍了关于使用axios的一些心得技巧,分享出来供大家参考学习,下面来一起看看详细的介绍:
一、带cookie请求
axios默认是请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决。
二、使post请求发送的是formdata格式数据
首先必须设置请求头
//可以通过这种方式给axios设置的默认请求头
axios.defaults.headers = {
"Content-Type"
:
"application/x-www-form-urlencoded"
}
1
2
3
4
5
6
7
8
9
// 发送请求前处理request的数据
axios.defaults.transformRequest = [
function
(data) {
// Do whatever you want to transform the data
let newData =
''
for
(let k
in
data) {
newData += encodeURIComponent(k) +
'='
+ encodeURIComponent(data[k]) +
'&'
}
return
newData
}]
三、拦截器
你可以截取请求或响应在被 then 或者 catch 处理之前。
举个小例子:发ajax请求的时候需要有一个loading动画,而在请求回来之后需要把loading动画关掉,就可以使用这个拦截器来实现。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
ps:另外附上自己在项目中使用axios的方式
一般会将所有的ajax请求放在一个模块中,新建一个http.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
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
//http.js
//设置请求baseURL
axios.defaults.baseURL =
'/api'
//设置默认请求头
axios.defaults.headers = {
"Content-Type"
:
"application/x-www-form-urlencoded"
}
// 发送请求前处理request的数据
axios.defaults.transformRequest = [
function
(data) {
let newData =
''
for
(let k
in
data) {
newData += encodeURIComponent(k) +
'='
+ encodeURIComponent(data[k]) +
'&'
}
return
newData
}]
// 带cookie请求
axios.defaults.withCredentials =
true
//get请求
function
get(url) {
return
body => axios.get(url, { params: body })
}
//post请求
function
post(url) {
return
body => axios.post(url, body)
}
//导出使用
export const login = get(
'/login'
)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
假设配合vue使用
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引入login模块
import { login } from
'http'
export
default
{
methods:{
//配合 async/await使用效果更佳
async get() {
try
{
let res = await login({ account:
'admin'
})
console.log(res)
}
catch
(e) {
console.log(e)
}
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
再另外有些人可能喜欢把axios挂载到Vue的原型上,从而在子组件内可以直接访问的到,做法如下:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//添加请求拦截器
axios.interceptors.request.use(config => {
//在发送请求之前做某事,比如说 设置loading动画显示
return
config
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做些事,比如说把loading动画关掉
return
response
}, error => {
//请求错误时做些事
return
Promise.reject(error)
})
//如果不想要这个拦截器也简单,可以删除拦截器
var
myInterceptor = axios.interceptors.request.use(
function
() {
/*...*/
})
axios.interceptors.request.eject(myInterceptor)
阅读全文
0 0
- 关于使用axios的一些心得技巧分享
- 一些关于使用axios的心得
- 关于友盟社会化分享框架的一些使用心得
- 关于YunFile网盘的一些使用技巧与心得
- 关于工作技巧的一些心得
- 分享一些数据库使用的心得
- FreeMarker的一些使用心得和技巧
- 关于广州创龙公司TMS320C6748开发使用的一些心得和大家分享下
- eclipse使用技巧心得分享
- eclipse使用技巧心得分享
- eclipse使用技巧心得分享
- eclipse使用技巧心得分享
- eclipse使用技巧心得分享
- eclipse使用技巧心得分享
- 一些关于Liferay的使用心得
- 一些关于Liferay的使用心得
- 一些关于Liferay的使用心得
- 关于biweb cms 的一些使用心得
- 阿里巴巴iDST+阿里视频云:计算机视觉和机器学习在消费级视频中的应用
- 谷歌quic协议自带网络仿真器代码分析(一)
- 网络中数据传输过程的分析
- python2.6升级python2.7
- 2.3、列表
- 关于使用axios的一些心得技巧分享
- .a静态库
- 重温数据结构:哈希 哈希函数 哈希表
- dubbo源码 学习笔记(一)
- 创建指定路径文件
- 2.4、元组
- 阿里Java开发手册之编程规约
- u_boot添加命令(NOR Flash中uboot的烧写代码)
- PHP扩展pcntl(进程控制以及信号处理)中文文档