本系列博客汇总在这里：Vue.js 汇总
网络请求
- 一、选择什么网络模块?
- 1、选择一：传统的 Ajax
- 2、选择二：jQuery-Ajax
- 3、选择三：Vue-resource
- 4、选择四：axios
- 二、jsonp
- 三、axios 框架的使用
- 1、安装
- 1、功能特点
- 2、axiox 请求方式
- 四、全局配置
- 五、常见的配置选项
- 六、axios 的实例
- 七、axios 封装
- 八、如何使用拦截器？
源码工程文件为：
一、选择什么网络模块?
Vue 中发送网络请求有非常多的方式，那么，在开发中，如何选择呢?
1、选择一：传统的 Ajax
传统的 Ajax 是基于 XMLHttpRequest(XHR)。
为什么不用它呢?
非常好解释，配置和调用方式等非常混乱，编码起来看起来就非常头大。所以真实开发中很少直接使用，而是使用 jQuery-Ajax。
2、选择二：jQuery-Ajax
在前面的学习中，我们经常会使用 jQuery-Ajax，相对于传统的 Ajax 非常好用。
为什么不选择它呢?
首先， 我们先明确一点： 在 Vue 的整个开发中都是不需要使用 jQuery 了。那么, 就意味着为了方便我们进行一个网络请求，特意引用一个 jQuery，你觉得合理吗？jQuery 的代码 1w+ 行。Vue 的代码才 1w+ 行，完全没有必要为了用网络请求就引用这个重量级的框架。
3、选择三：Vue-resource
官方在 Vue1.x 的时候，推出了 Vue-resource，Vue-resource 的体积相对于 jQuery 小很多。另外 Vue-resource 是官方推出的。
为什么不选择它呢?
在 Vue2.0 退出后， Vue 作者就在 GitHub 的 Issues 中说明了去掉 vue-resource，并且以后也不会再更新，那么意味着以后 vue-reource 不再支持新的版本时，也不会再继续更新和维护，对以后的项目开发和维护都存在很大的隐患！
4、选择四：axios
在说明不再继续更新和维护 vue-resource 的同时，作者还推荐了一个框架： axios。
为什么不用它呢?
axios 有非常多的优点，并且用起来也非常方便。
稍后，我们对他详细学习。
二、jsonp
在前端开发中，我们一种常见的网络请求方式就是 JSONP，使用 JSONP 最主要的原因往往是为了解决跨域访问的问题。
JSONP 的原理是什么呢？
JSONP 的核心在于通过 <script> 标签的 src 来帮助我们请求数据，原因是我们的项目部署在domain1.com 服务器上时，是不能直接访问 domain2.com 服务器上的资料的。这个时候，我们利用 <script> 标签的 src 帮助我们去服务器请求到数据，将数据当做一个 javascript 的函数来执行，并且执行的过程中传入我们需要的 json。所以，封装 jsonp 的核心就在于我们监听 window 上的 jsonp 进行回调时的名称。
JSONP 如何封装呢?
我们一起自己来封装一个处理 JSONP 的代码吧！
JSONP 封装
三、axios 框架的使用
1、安装
npm install axios --save
1、功能特点
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 等等
2、axiox 请求方式
支持多种请求方式
- axios(config)
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
如何发送请求呢?
发送 get 请求演示:
发送并发请求:
有时候，我们可能需求同时发送两个请求，使用 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'} - URL 查询对象：
params:{ id: 12 } - 查询对象序列化函数：
paramsSerializer: function(params){ } - request body：
data: { key: 'aa'} - 超时设置s：
timeout: 1000 - 跨域是否带Token：
withCredentials: false - 自定义请求处理：
adapter: function(resolve, reject, config){} - 身份验证信息：
auth: { uname: '', pwd: '12'} - 响应的数据格式 json / blob /document /arraybuffer / text / stream：
responseType: 'json'
六、axios 的实例
为什么要创建 axios 的实例呢？
当我们从 axios 模块中导入对象时，使用的实例是默认的实例。当给该实例设置一些默认配置时，这些配置就被固定下来了。但是后续开发中，某些配置可能会不太一样。比如某些请求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等。这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息。
七、axios 封装
八、如何使用拦截器？
axios 提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。
拦截器中都做什么呢？
请求拦截可以做到的事情：
请求拦截中错误拦截较少，通常都是配置相关的拦截，可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
拦截器中都做什么呢？
响应拦截中完成的事情：响应的成功拦截中，主要是对数据进行过滤。
响应的失败拦截中，可以根据 status 判断报错的错误码，跳转到不同的错误提示页面。
如有错误，欢迎指正！
