在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。技术发展的迅速,出现了不同的新颖的交互方式,这个就是axios,而vue-resource也将逐渐淘汰(Vue 官方建议用 axios 代替 vue-resourse)
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Vue2.0之后,尤雨溪大大推荐大家用axios替换JQuery ajax,Axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它的优势在于
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口(重要,方便了很多的操作)
这个支持防止CSRF其实挺好玩的,是怎么做到的呢,就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
Axios既提供了并发的封装,也没有下文会提到的fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。
这里给大家推荐一个vue的小插件 vue-axios - 将axios整合到VueJS的封装