网络应用——axios+vue
- Vue.js如何获取网络数据
- 为什么是axios?ajax不香吗？
- axios的使用方法
- Vue.js如何结合axios
Vue.js如何获取网络数据
学习完Vue.js基本的语法后，如果要制作网络应用，必然也要使用到获取网络上的数据。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，在这里推荐大家使用。但是大家一定也会有疑问：为什么使用axios而不是ajax？axiox的使用方法是什么？以及Vue.js如何结合axios使用呢？下面为大家一一解答。
为什么是axios?ajax不香吗？
1、区别：
axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios
2、优缺点对比：
ajax：
（1）本身是针对MVC编程，不符合前端MVVM的浪潮
（2）基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个jquery非常不合理（采取个性化打包方案又不能享受cdn服务）
（3）ajax不支持浏览器的back按钮
（4）安全问题ajax暴露了与服务器交互的细节
（5）对搜索引擎的支持比较弱
（6）破坏程序的异常机制
（7）不容易调试
axios：
（1）从node.js创建http请求
（2）支持Promise API
（3）客户端防止CSRF（网站恶意利用）
（4）提供了一些并发请求的接口
总结一下：axios是对ajax的封装，更加安全方便，原生ajax架构不清晰，也不是面向MVVM编程，毛病一堆，所以，相对来说，axios对于Vue的使用者而言更加友好。
axios的使用方法
更多具体方案可以通过官网文档或者axios中文文档/axios中文网查看，本文只对get和post的使用方式做个简单介绍，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios的使用方法</title>
</head>
<body>
<button class="get">使用get方法</button>
<button class="post">使用post方法</button>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<!-- https:github.com/axios/axios -->
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list?num=4
请求方法：get
请求参数：num(笑话条数，数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=4")
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
});
}
/*
接口1：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg", {
username: "zsf"
})
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
});
}
</script>
</body>
</html>分别点击2个按钮获取对应的请求结果：
其中response是请求得到的数据，如果请求异常，则会得到异常信息err
Vue.js如何结合axios
在需要获取数据的函数中使用axios即可，但是需要注意的是因为多层函数嵌套的关系，this关键字会丢失，因此需要在axios中使用箭头函数或者that来代替this的方法。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue结合axios</title>
</head>
<body>
<div id="app">
<button @click="getJoke">获取笑话</button>
<p>{{joke}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
joke: "这是个好好笑的笑话"
},
methods: {
getJoke: function () {
// var that = this;
axios.get("https://autumnfish.cn/api/joke")
.then((response) => {
console.log(response.data);
this.joke = response.data;
// that.joke = response.data;
}, function (err) {
console.log(err);
});
}
}
});
</script>
</body>
</html>页面显示如下：
点击“获取笑话”按钮获取随机笑话替代：
