这篇博客详细介绍了在Vue项目中如何使用Axios，包括基本的get和post请求，文件上传，以及如何封装Axios。同时，博主分享了在前端配置跨域的方法，通过Vue的代理功能解决开发过程中遇到的跨域问题。
vue项目使用整理
1.1 axios 基本用法
安装：npm install axios -S # 也可直接下载axios.min.js文件
1、axios借助Qs对提交数据进行序列化
axios参考博客：https://www.jianshu.com/p/68d81da4e1ad
https://www.cnblogs.com/yiyi17/p/9409249.html
axios官网：https://www.npmjs.com/package/axios
get：axios发送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="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.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>
get：axios发送get请求
post: axios发送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="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.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>
post: axios发送post请求
views.py后端测试接口
def data(request):
if request.method == 'GET':
token_id = request.META.get('HTTP_AUTH
最低0.47元/天 解锁文章
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
