一转眼Vue 3.0都要发布了,学习使用Vue也有一段时间了,记录一下axios的用法
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中,有点类似于ajax,但是在MVVM模式中,使用axios是有好处的
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
ajax相对axios的缺点有
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发,XHR本身的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式非常混乱,而且基于事件的异步模型不友好。
当然ajax也是有优点的
1.异步请求,不妨碍用户浏览页面或者其他操作。
2.局部刷新,无需重新刷新页面。
3.界面与应用分离。有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
4.基于标准被广泛支持。
5.前端和后端负载平衡。最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。
一、axios获取数据的例子
axios.get("/static/data").then(function(res) { var data = res.data.data.list; for (var i = 0; i < data.length; i++) { if (data[i].id == id) { _this.o1.push(data[i]); } } });
二、axios通过get方式返回值
1.通过url返回参数
axios.get(‘/user?ID=12345‘) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
2.通过params传递参数
axios.get(‘/user‘, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
三、axios通过post方式返回值
axios.post(‘/user‘, { firstName: ‘Fred‘, // 参数 firstName lastName: ‘Flintstone‘ // 参数 lastName }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });