axios 网络模块

1. 选择什么网络模块

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

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

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

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

   4. axios框架：官方推荐使用
   

2. axios的功能特点

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

3. axios的请求方式

1. axios 支持多种请求方式：

   1. axios(config)       // config 是一个对象
   2. axios.request(config)
   3. axios.get(url, [config])
   4. axios.delete(url, [config])
   5. axios.head(url, [config])
   6. axios.post(url, [data], [config])
   7. axios.put(url, [data], [config])
   8. axios.patch(url, [data], [config])
   

4. 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请求的参数拼接,参数也可以直接写在 url 资源定位符后面 
           params:{
               name:'张三',
               age：18
           }
    }).then(res => {
           console.log(res)
    })
   //注：axios方法默认返回一个Promise对象，所以在后面可以直接用then处理请求回来的数据
   //    method:'get' 设置请求的类型，默认为get
   

4. axios发送并发请求

1. 比如有时候我们可能需要同时发送两个请求：

   // 数组中可以放入多个请求，返回的结果是一个数组，用 spread 给解构了
    axios.all([axios({}), axios({})])
    	  .then(axios.spread((res1, res2) => {
                console.lof(res1)
                console.lof(res2)
          }))
          
   // 另一种取值方式(编码比较清晰，推荐)
    axios.all([axios({}), axios({})])
    	  .then(results => {
    	  		// results 是一个数组，里面存着两个 axios 请求的数据
    	  		console.log(results[0])
    	  		console.log(results[1])
   	   })
   

5. axios全局配置

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

   // 例如在全局作用域下定义公共配置： 
     axios.defaults.baseURL = 'http://123.207.32.32:8000'  // 根路径提取出来
     axios.defaults.timeout = 5000      // 设置请求超时的事件，毫秒值
     axios({
   	url: '/home/multidata'
     }).then(res => {
   	console.log(res)
     })
     // 全局配置就是将一些公共的配置参数进行抽取，然后每个 axios 请求都能使用
     // 全局配置的就是：axios.defaults.配置项 = xxx
     // 一般的配置都写在 axios 里面
   

6. axios常见配置选项

1. 请求地址：

   url:'/user'
   

2. 请求类型：

   method:'post'
   // 请求类型默认为 get，也可以设置为post
   

3. 请求根路径：

   baseURL:'http://www.mt.com/api'
   // 相同的路径部分可以抽取出来，作为根路径
   

4. 请求前的数据处理:

   transformRequest:[function(data){}]
   

5. 请求后的数据处理:

   transformResponse:[function(data){}]
   

6. 自定义请求头:

   headers:{'x-Requested-With':'XMLHttpRequest'}
   

7. URL查询对象:

   params{id:12, name: '张三'}
   // params 里面的数据最后会拼接到 url 后面，然后发送到服务端
   

8. 请求超时：

   timeout：5000 （毫秒值）
   

9. 查询对象序列化函数

   paramsSerializer:function(params){}
   

10. request body （请求体）

    data:{key:'aa'}
    // 当请求类型为 post 的时候，使用 data 设置请求体信息
    

11. 跨域是否带Token

    withCredentials:false
    

12. 自定义请求处理

    adapter:function(resolve, reject, config){}
    

13. 身份验证信息

    auth:{uname:"pwd:12"}
    

14. 响应的数据格式json/blob/document/arraybuffer/text/stream

    responseType:'json'
    

7. axios创建实例

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

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

8. axios模块封装

1. 在开发中，如果一个项目的多个组件都需要发送 axios 请求，那么每个组件中都需要依赖 axios 框架
2. 如果哪一天 axios 框架，停止维护了，那么这个项目的每个组件的 axios 都需要换成别的 Ajax 请求框架，这样
   对于比较大的项目，维护性太难了
3. 所以，一般开发中我们要减少代码的耦合度，把 axios 给单独封装出来，便于维护

   // 1. 在 src 目录下创建一个文件夹，如：network（网络的意思）
   // 2. 在 network 文件夹中创建一个 js 文件，如：request.js （请求的意思）
   // 3. 在 request.js 中加载 axios 模块
   	  import axios from 'axios'
   // 4. 导出封装的函数，因为这个文件中可能会封装多个 axios 请求实例，所以用 export 导出
   	  export function request(config) {
   // 5. 创建 axios 实例，并定义公共配置
   	  	  const instance = axios.create({
   	           baseURL:'http://123.207.32.32:8000',
   	           timeout: 5000
   	      })
   // 6. 使用 axios 实例 instance，并且把它当做返回值，axios 实例返回的是一个 Promise 对象
   //    在项目文件中调用的时候，可以用 then 来处理请求结果
   	      return instance(config)
   	  }
   // request 函数的参数：config 请求的配置
   //============================================================================================
   // 在项目文件中使用：
   // 1. 导入封装的 axios 请求函数
   	  import {request} from './network/request'
   // 2. 调用导入的请求函数
   	  request({ url: '/home/multidata'})
   	  		 .then(res => {
                      console.log(res)
                }).catch(err => {
                      console.log(err)
                })
   

9. axios拦截器

1. 比如 config 请求中的一些信息不符合服务器的要求，在拦截的时候可以做一些验证或修改

2. 比如 在每次发送网络请求时，都希望在界面中显示一个请求的图标，这时候就可以把图标给显示出来然后在拦截响应
   的时候，给隐藏起来

3. 某些网络请求(比如登录（token）),必须携带一些特殊信息

4. axios请求拦截：

   // 拦截请求的代码，要写在 axios 请求之前
   axios.interceptors.request.use( config => {
   	// 当请求成功发送，就会在这里被拦截，函数的参数是 config 对象（请求的配置对象）
   	// 拦截到之后一定要把参数 config 给 return 出去，不然就请求失败报错了
   	return config
   }, 
   err => {
   	// 请求发送失败就会来到这里，一般不会发送失败，除非断网、断电之类的因素
   	// err是请求失败后的错误信息 
   })
   

5. axios响应拦截：

   axios.interceptors.response.use(res => {
   	// 服务器响应成功后，就会在这里被拦截
   	// res是拦截到的响应数据，一般情况下我们只需要里面的 data 数据
   	// 拦截之后一定要把结果 return 出去 
   	return res.data
   },
   err => {
   	// 当服务端没有给予响应，就会来到这里
   	// err是响应失败后的信息
   })