ajax隶属于原始js中，核心使用XMLHttpRequest对象，JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。本节将阐述它们三者的不同用法。
1、前提约束
-
提供一个api http://localhost:8082/getdata
注意：这个api的端口、名称读者可以根据自己的实际去设置；该api允许跨域访问2、操作步骤
- 创建一个web项目，假设名称为demo，端口为8080
- 在demo/webapp下引入axios.min.js、jquery-1.10.2.js、vue.min.js
- 在demo/webapp下创建indexaxios.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios demo</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="axios">
{{result}}
</div>
<script type="text/javascript">
vm = new Vue({
el: '#axios',
data: {
result: "wanho"
},
mounted() {
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
var _this = this;
axios.get("http://localhost:8082/getdata")
.then(function (response) {
console.log(response.data.data);
_this.result = response.data.data;
})
.catch(function (reason) {
console.log(reason);
})
}
});
</script>
</body>
</html>- 在demo/webapp下创建indexfetch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fetch demo</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="axios">
{{result}}
</div>
<script type="text/javascript">
vm = new Vue({
el: '#axios',
data: {
result: "wanho"
},
mounted() {
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
var _this = this;
fetch("http://localhost:8082/getdata").then(function (response) {
return response.json();
}).then(function(json) {
_this.result=json.data;
}).catch(function (reason) {
console.log(reason);
})
}
});
</script>
</body>
</html>- 在demo/webapp下创建indexajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax democ</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="axios">
{{result}}
</div>
<script type="text/javascript">
vm = new Vue({
el: '#axios',
data: {
result: "wanho"
},
mounted() {
//由于this在回调函数中指向不同并非是vue实例所以先赋值给_this
var _this = this;
$.get("http://localhost:8082/getdata",function (data) {
_this.result = data.data;
});
}
});
</script>
</body>
</html>以上就是通过ajax, axios，fetch结合vue访问第三方api的过程。