本节课程我们主要学习axios的使用,axios主要的功能就是实现ajax功能,他是一个简单的ajax库。
内容
我们经常使用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;
})
}