文章目录
选择网络模块
选择一:传统的Ajax是基于XMLHttpRequest(XHR)
为什么不用它呢?
- 非常好解释, 配置和调用方式等非常混乱.
- 编码起来看起来就非常蛋疼.
- 所以真实开发中很少直接使用, 而是使用
jQuery-Ajax
选择二:jQuery-Ajax
相对于传统的Ajax非常好用.
- 为什么不选择它呢?
首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.
那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
jQuery的代码1w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用这个重量级的框架.
选择三:官方在Vue1.x的时候, 推出了Vue-resource.
Vue-resource
的体积相对于jQuery
小很多.
另外Vue-resource
是官方推出的.
- 为什么不选择它呢?
在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了
去掉vue-resource,
并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本
时, 也不会再继续更新和维护.
对以后的项目开发和维护都存在很大的隐患.
选择四:axios
axios有非常多的优点, 并且用起来也非常方便.
JSONP封装
在前端开发中,我们常见的网络请求方式就是JSONP
使用JSONP最主要的原因是往往是为了解决跨域访问的问题。
JSONP
- JSONP的核心在于通过
<script>标签
的src来帮助我们请求数据.- 原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的.
- 这个时候, 我们利用
<script>标签
的src帮助我们去服务器请求到数据, 将数据>当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json.- 所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.
代码示例