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
// 运行时依赖
  1. 页面中导入：
import axios from 'axios'
  1. 使用：
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'
  1. 请求类型：
method:'post'
// 请求类型默认为 get，也可以设置为post
  1. 请求根路径：
baseURL:'http://www.mt.com/api'
// 相同的路径部分可以抽取出来，作为根路径
  1. 请求前的数据处理:
transformRequest:[function(data){}]
  1. 请求后的数据处理:
transformResponse:[function(data){}]
  1. 自定义请求头:
headers:{'x-Requested-With':'XMLHttpRequest'}
  1. URL查询对象:
params{id:12, name: '张三'}
// params 里面的数据最后会拼接到 url 后面，然后发送到服务端
  1. 请求超时：
timeout：5000 （毫秒值）
  1. 查询对象序列化函数
paramsSerializer:function(params){}
  1. request body （请求体）
data:{key:'aa'}
// 当请求类型为 post 的时候，使用 data 设置请求体信息
  1. 跨域是否带Token
withCredentials:false
  1. 自定义请求处理
adapter:function(resolve, reject, config){}
  1. 身份验证信息
auth:{uname:"pwd:12"}
  1. 响应的数据格式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是请求失败后的错误信息 
})
  1. axios响应拦截：
axios.interceptors.response.use(res => {
	// 服务器响应成功后，就会在这里被拦截
	// res是拦截到的响应数据，一般情况下我们只需要里面的 data 数据
	// 拦截之后一定要把结果 return 出去 
	return res.data
},
err => {
	// 当服务端没有给予响应，就会来到这里
	// err是响应失败后的信息
})