老雷Vue开发视频教程之axios的使用
查看视频教程或者获取有关《老雷Vue开发视频教程》更多信息

老雷PHP全栈开发教程之必备插件axios

我们经常使用jquery来实现ajax。但是我们现在用上vue了,jquery显得太笨重了。

我们只需要它的ajax功能,所以我们找来axios替换。

vue+axios

axios在ie浏览器是支持不是很好。

我们通常在移动端使用它。


https://github.com/axios/axios


get

axios({
url: 'data.json',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function(res) {
console.log(res.data.data.title);
})
.catch(function(error) {
console.log(error);
})
.finally(function() {
});

post

axios({
method: 'post',
url: '/school_php/api.php',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
})
.then(function(res) {
console.log(res.data);
})
.catch(function(error) {
console.log(error);
});

文件上传

function upload(){
console.log("wia")
var file=document.getElementById("upfile");
var upfile=file.files[0]
var form=new FormData();
form.append("upfile",upfile,upfile.name);
form.append("title","文件上传");
axios({
method: 'post',
url: 'upload.php',
data: form,
headers: {
'Content-Type': 'multipart/form-data'
},
})
.then(function(res) {
document.getElementById("res").src=res.data.filename;
})
}

//课后练习

大家去实现一遍 get post 文件上传

github 的axios手册看一遍