05.axios
# 01.axios介绍
https://www.cnblogs.com/xiaonq/p/11027880.html
# 1.1 axios介绍
1.vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现
2.axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护
3.参考:GitHub上搜索axios,查看API文档:https://github.com/axios/axios
vue官网:https://cn.vuejs.org/v2/guide/installation.html?#CDN
axios官网:https://www.bootcdn.cn/axios/
qs官网:https://cdnjs.com/libraries/qs
1
2
3
2
3
# 1.2 安装axios
1.
npm install axios -S
# 也可直接下载axios.min.js文件2.下载后即到 C:\Users\tom\node_modules\axios\dist 路径下找到 axios.min.js 文件
# 1.3 qs使用
#1、qs用途: 在 axios中,利用QS包装data数据
#2、安 装: npm install qs -S
#3、常见用法:
'''
import Qs from 'qs';
Qs.stringify(data);
Qs.parse(data)
'''
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 02.axios发送请求
# 2.1 发送get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
<button @click="sendGet">GET方式发送AJAX请求</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.6/qs.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendGet(){
// 1、发送get请求
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'get', //2、请求方法
params: {ids: [1,2,3],type: 'admin'}, //3、get请求参数
paramsSerializer: params => { //4、可选函数、序列化`params`
return Qs.stringify(params, { indices: false })
},
responseType: 'json', //5、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'}, //6、认证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
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
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
# 2.2 发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送AJAX请求</title>
</head>
<body>
<div id="itany">
<button @click="sendPost">POST方式发送AJAX请求</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.6/qs.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、发送post请求
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'post', // 2、请求方法
data: Qs.stringify( //3、可选函数、序列化`data`
{ids: [1,2,3],type: 'admin'}, //4、提交数据
{ indices: false } // indices: false
),
responseType: 'json', //5、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'},//6、身份验证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败:'+err.status+','+err.statusText);
});
}
}
});
}
</script>
</body>
</html>
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
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
# 2.3 views.py
from django.views import View
from django.http import JsonResponse
class TestAxios(View):
def get(self,request):
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.GET) # 获取get请求中列表
data = {
'id':1,
'name': 'zhangsan'
}
return JsonResponse(data=data)
def post(self,request):
token_id = request.META.get('HTTP_AUTHORIZATION') # header中的tokenid
print(request.POST) # 获取post请求中的列表
data = {
'id':1,
'name': 'zhangsan',
'method': 'POST'
}
return JsonResponse({"code": 10000})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 03.上传文件
# 3.1 post_file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送axios请求</title>
</head>
<body>
<div id="itany">
<input type="file" name="fileUpload" id="fileUp" @change="change($event)" ref="inputFile" >
<button @click="sendPost">POST方式发送axios请求</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.6/qs.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
uid:''
},
methods:{
sendPost(){
// 1、发送post请求
var data = new FormData();
data.append("fafafa",this.file) // 图片对象
data.append("username","zhangsan") // 其他key-value值
axios({
url: 'http://127.0.0.1:8000/data/', //1、请求地址
method: 'post', //2、请求方法
data: data, //3、提交的数据
responseType: 'json', //4、返回默认格式json
headers: {'authorization': 'xxxtokenidxxxxx'},//5、身份验证token
})
// 2、回调函数
.then(resp => {
console.log(resp.data);
})
// 3、捕获异常
.catch(err => {
console.log('请求失败:'+err.status+','+err.statusText);
});
},
change:function(event){
this.file = event.target.files[0]
},
},
});
}
</script>
</body>
</html>
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
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
# 3.2 views.py
from django.views import View
from django.http import JsonResponse
class TestAxios(View):
def post(self,request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
print(username, fafafa)
with open(fafafa.name, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'code': True, 'data': request.POST.get('username')}
data = {
'id':1,
'name': 'zhangsan',
'method': 'POST'
}
return JsonResponse({"code": 10000})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
编辑 (opens new window)
上次更新: 2024/3/13 15:35:10