本系列博客汇总在这里:Vue.js 汇总
源码工程文件为:
Vue 中发送网络请求有非常多的方式,那么,在开发中,如何选择呢?
传统的 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 不再支持新的版本时,也不会再继续更新和维护,对以后的项目开发和维护都存在很大的隐患!
在说明不再继续更新和维护 vue-resource 的同时,作者还推荐了一个框架: axios
。
为什么不用它呢?
axios 有非常多的优点,并且用起来也非常方便。
稍后,我们对他详细学习。
在前端开发中,我们一种常见的网络请求方式就是 JSONP,使用 JSONP 最主要的原因往往是为了解决跨域访问的问题。
JSONP 的原理是什么呢?
JSONP 的核心在于通过 标签的 src 来帮助我们请求数据,原因是我们的项目部署在
domain1.com
服务器上时,是不能直接访问 domain2.com
服务器上的资料的。这个时候,我们利用 标签的 src 帮助我们去服务器请求到数据,将数据当做一个 javascript 的函数来执行,并且执行的过程中传入我们需要的 json。所以,封装 jsonp 的核心就在于我们监听 window 上的 jsonp 进行回调时的名称。
JSONP 如何封装呢?
我们一起自己来封装一个处理 JSONP 的代码吧!
npm install axios --save
支持多种请求方式
如何发送请求呢?
有时候,我们可能需求同时发送两个请求,使用 axios.all,可以放入多个请求的数组,axios.all([])
返回的结果是一个数组,使用 axios.spread
可将数组 [res1,res2]
展开为 res1, res2。
在上面的示例中,我们的 BaseURL 是固定的,事实上,在开发中可能很多参数都是固定的。这个时候我们可以进行一些抽取,也可以利用 axiox 的全局配置。
axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
url: '/user'
method: 'get'
baseURL: 'http://www.mt.com/api'
transformRequest:[function(data){}]
transformResponse: [function(data){}]
headers:{'x-Requested-With':'XMLHttpRequest'}
params:{ id: 12 }
paramsSerializer: function(params){ }
data: { key: 'aa'}
timeout: 1000
withCredentials: false
adapter: function(resolve, reject, config){}
auth: { uname: '', pwd: '12'}
responseType: 'json'
为什么要创建 axios 的实例呢?
当我们从 axios 模块中导入对象时,使用的实例是默认的实例。当给该实例设置一些默认配置时,这些配置就被固定下来了。但是后续开发中,某些配置可能会不太一样。比如某些请求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等。这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息。
axios 提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
拦截器中都做什么呢?
请求拦截可以做到的事情:
请求拦截中错误拦截较少,通常都是配置相关的拦截,可能的错误比如请求超时,可以将页面跳转到一个错误页面中。
拦截器中都做什么呢?
响应拦截中完成的事情:响应的成功拦截中,主要是对数据进行过滤。
响应的失败拦截中,可以根据 status 判断报错的错误码,跳转到不同的错误提示页面。
如有错误,欢迎指正!