axios

功能特点：

在浏览器中发送XMLHttpRequests请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据等等

网络模块

Vue中发送网络请求有非常多的方式

传统的Ajax是基于XMLHttpRequest(XHR)
不使用的原因：配置和调用方式等都非常混乱，编码不够优美，所以真实开发中很少使用，而是使用jQuery-Ajax
可以使用jQuery-Ajax，相对于传统的Ajax很好用
首先明确一点，在vue的整个开发中都是不需要使用jQuery了
原因：jQuery和Vue的代码量差不多，所以没有必要为了使用网络请求就引用这个重量级的框架
官方在Vue1.x的时候，推出了Vue-resource
这个的体积相对于jQuery小很多，但是在Vue2.0推出后，Vue作者说明去掉vue-resource，所以也不使用vue-resource
axios，在作者说明不再继续维护vue-resource的时候，推荐大家使用axios

JSONP最主要的原因是为了解决跨域访问的问题有时间要看一下

axios请求方式

axios(config) 默认是get，如果想用post，就可以给传递一个method
里面的params就是专门针对get请求的参数拼接，这个对象内部就是参数和属性值的键值对
如果是对post请求的话，要使用data
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]])

axios并发请求

使用axios.all，可以放入多个请求的数组，数组由axios组成，处理后的数据以数组的形式通过then传出

axios.all([axios(), axios()])
.then(res => {})

对于返回的数组结果也可以通过axios.spread将数组直接展开，如：

axios.all([axios(), axios()])
.then(axios.spread((res1, res2) => {}))

全局配置

因为在开发过程中很多东西都是重复的，如果每次都写的话就会显的代码很冗余，所以就要进行一下全局配置

怎么设置全局配置呢？
就直接在js文件中进行下面的设置就好，timeout是设置超时时间，单位是毫秒

axios.defaults.baseURL = 'https://www.devtool.top'
axios.defaults.timeout = 5000

常见的配置选项

url: 请求地址
method: 请求类型
baseURL: 请求根路径
transformRequest: 请求前的数据处理
transformResponse: 请求后的数据处理
headers: 自定义的请求头
params: URL查询对象

可以通过axios.create()来创建axios实例

对axios进行简单封装

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: 'https://www.devtool.top',
    timeout: 5000
  })
  return instance(config)
}

axios.create创建出来的就是一个promise，所以就可以直接返回

如何使用axios的拦截器

一共有四种拦截器，请求成功拦截，请求失败拦截，响应成功拦截，响应失败拦截
例如：

instance.interceptors.request.use(config => {
  console.log(config);
  return config // 拦截成功后，一定要及时返回
}, err => {
  console.log(err);
})

instance.interceptors.response.use(res => {
  console.log(res);
  return res.data
}, err => {
  console.log(err);
})