Vue 网络请求篇

1. 网络请求

1. Vue中发送网络请求有非常多的方式，那么在开发中，如何选择呢

2. Ajax: 传统的Ajax是基于XMLHttpRequest(XHR)，配置和调用方式等非常混乱所以真实开发中很少直接使用，
   而是使用jQurey-Ajax

3. jQurey-Ajax：在Vue的整个开发中都不需要使用jQuery了，所以我们不会为了一个网络请求，就引进jQuery，
   因为jQuery的代码1万多行，Vue的代码才1万多行

4. Vue-resource：官方在Vuel.x的时候就推出了Vue-resource，它的体积比jQuery小很多，在Vue2.0推出后，
   Vue的作者决定去掉Vue-resource，并且以后再也不会更新，所以使用它对项目的开发和维护存在很大的隐患

5. axios：官方推荐使用

2. 网络模块 axios

2.1 axios的功能特点

1. 在浏览器中发送XMLHttpRequests请求
2. 在node.js中发送http请求
3. 支持PromiseAPI
4. 拦截请求和响应
5. 转换请求和响应数据

2.2 axios的使用

1. axios的安装：npm install axios --save

2. 页面导入：import axios from 'axios'

3. 使用：

    axios({
          
           url:'http://123.207.32.32:8000/home/multidata',
           // params是针对get请求的参数拼接
           params:{
          
               type:'pop',
               page：1
           }
    }).then(res => {
          
           	console.log(res)
       })
   // 注：axios方法默认返回一个Promise对象，所以在后面可以直接用then处理请求回来的数据
   //     method:'get' 设置请求的类型，默认为get
   

4. axios发送并发请求

   //比如有时候我们可能需要同时发送两个请求：
    axios.all([])  //数组中可以放入多个请求，返回的结果是一个数组
    axios.all([axios({
          }), 
            	axios({
          }) 
          ]).then(axios.spread((res1, res2) => {
          
                	console.lof(res1)
                	console.lof(res2)
    		  }))
   

2.3 axios全局配置

1. 在开发中可能很多参数都是固定的，这时候我们可以进行一些抽取，也可以利用axios全局配置
   例如： axios.defaults.baseURL = '固定的路径'

2. axios常见配置选项
   a. 请求地址： url:'/user'
   b. 请求类型： method:'get'
   c. 请求根路径：baseURL:'http://www.mt.com/api'
   d. 请求前的数据处理: transformRequest:[function(data){}]
   e. 请求后的数据处理: transformResponse:[function(data){}]
   f. 自定义请求头: headers:{'x-Requested-With':'XMLHttpRequest'}
   g. URL查询对象: params{id:12}
   h. 请求超时：5000毫秒值

2.4 axios创建实例

1. 之前的axios请求都是使用的全局对象
2. 我们也可以使用自己创建的实例：

   const instance = axios.create({
          
       //这里可以抽取公有配置 
       baseURL:'http://....'
   })
   instance({
          
       url:''
   }).then(res => {
          })
   

2.5 axios拦截器

1. 为什么需要拦截？
   a. 比如config请求中的一些信息不符合服务器的要求，在拦截的时候可以做一些验证或修改
   b. 比如在每次发送网络请求时，都希望在界面中显示一个请求的图标，这时候就可以把图标给显示出来然后在拦截
       响应的时候，给隐藏
   c. 某些网络请求(比如登录（token）),必须携带一些特殊信息

   axios.interceptors.request.use( config => {
          
     //config是拦截到的请求，拦截到之后一定要return出去，不然就请求失败报错了
     return config
   }, 
   err => {
          
   //err是请求失败后的错误信息 
   })
   

2. axios响应拦截

   axios.interceptors.response.use(res => {
          
   	//res是拦截到的响应数据，一般情况下我们主需要里面的data 
    return res.data
   },
   err => {
          
   	//err是响应失败后的信息 
   })
   

3. vue-resource 实现网络请求（了解即可）

3.1 vue-resource 实现网络请求步骤

1. vue-resource的网络请求方式有三种： get、post、jsonp

2. vue-resource 第三方包安装：

   npm install vue-resource
   

3. 然后引进 Vue 包和 vue-resource 第三方包

   <script src="node_modules/vue/dist/vue.js"></script>
   <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
   // vue.js加载之后，就会默认有一个全局的 Vue 对象
   // vue-resource.js加载完之后，会在 Vue 对象上挂载一个属性 $http
   

4. 发起 get 请求：

   // 当发起 get 请求之后，通过 .then 来设置请求成功后的回调函数，
   this.$http.get('请求地址').then ( function (res) {
          
       if(res.status == 0){
          
           console.log(res.body) 
       }else{
          
           console.log('404')
       }  
   })
   // 先判断当 res.status == 0 就表示请求成功了 
   // 通过 res.body 拿到服务器响应的数据
   

5. 发起 post 请求：

    //手动发起post请求，默认没有表单格式，所以有的服务器处理不了。
    //通过 post 方法的第三个参数 {emulateJSON:true} 设置提交的内容类型为普通表单数据格式
    this.$http.post('请求地址', {
          '提交给服务器的数据'},{
           emulateJSON : true })
   .then(function (res) {
          
      console.log(res.body)
    }) 
   

6. 发起 jsonp 请求：

    this.$http.jsonp('请求地址').then(function (res) {
          
       console.log(res.body)
    })
   

3.2 jsonp的实现原理

1. 跨域限制：由于浏览器的安全性限制，不允许 Ajax 访问 协议不同、域名不同、端口号不同的数据接口，浏览器认为
   这种访问不安全
2. 解决跨域限制：可以通过动态创建 script 标签的的形式，把 script 标签的 src 属性，指向数据接口地址，因
   为 script 标签不存在跨域限制，这种数据获取方式，称作 jsonp
3. 根据 jsonp 的实现原理，知晓 jsonp 只支持 get 请求
4. 具体实现过程：
   a). 先在客户端定义一个回调方法，预定义对数据的操作
   b). 再把这个回调方法的名称，通过 url 传参的形式，提交到服务器的数据接口
   c). 服务器数据接口组织好要发送给客户端的数据，然后拿着客户端传递过来的回调函数名称，
        拼接出一个调用这个方法的字符串，发送给客户端去解析执行
   d). 客户端拿到服务器返回的字符串之后，当做 Script 脚本去解析执行，这样就能够拿到 jsonp
        的数据了