ajax, jqueryAjax, fetch,axios对比
ajax
- 优点：局部更新；原生支持
- 缺点：可能破坏浏览器后退功能；嵌套回调难处理
jqueryAjax
- 在原生的ajax的基础上进行了封装；支持jsonp
fetch
- 优点：解决回调地狱
- 缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill
axios
- 几乎完美
示例获取一条笑话
效果：
代码：
引入axios
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!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+vue</title>
</head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods: {
getJoke:function(){
// this 会改变 所以就先存起来
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// console.log(response)
console.log(response.data);
// console.log(this.joke);
that.joke = response.data;
},function (err) {
console.log(err);
})
}
},
})
</script>
</body>
</html>
