一、网络模块封装

经过Ajax，JQuery-Ajax和不再维护的vue-resource后，选择官方推荐的Ajax库–axios。

axios特点如下：

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

二、axios基本使用

2.1 安装axios

使用如下命令：

npm install axios --save

一个可以进行很多请求模拟的网站：httpbin.org

2.2 使用axios

在main.js中导入axios并使用：

import axios from 'axios'

axios({
  url: 'xxx',
  method:'get'
}).then(res => {
  console.log(res);
})

axios({
  url: 'xxx',
  // get方法传参使用
  params: {
    key:'xxx'
  },
  method:'get'
}).then(res => {
  console.log(res);
})

三、axios配置

3.1 发送并发请求

使用axios.all可以放入多个请求的数组，同时发送多个请求。

直接使用axios.all([])返回的是一个数组，此时使用axios.spread可将数组内容进行展开。

axios.all([
  axios({
    url: 'xxxxx',
    params: {
      key:'xxx'
    },
    method:'get'
}), 
  axios({
    url: 'xxx',
    method:'get'
})]).then(axios.spread((res1, res2) => {
  console.log(res1, res2)
}))

效果如下：

不使用axios.spread的效果：

3.2 全局配置

如果在多个请求中，调用的是同一个url，只是请求的路径不同，此时可以进行一些抽取，利用axios的全局配置：

//提取全局URL以及相应延迟时间（单位是毫秒）
axios.defaults.baseURL = 'xxx'
axios.defaults.timeout = 5000

axios({
  url: '/home',
  params: {
    key:'xxx'
  },
  method:'get'
}).then(res => {
  console.log(res);
})

3.3 请求配置

创建请求时，只有url是必要的，method默认为get方法，其余的配置可在需要使用时查看官方文档。

http://www.axios-js.com

• url请求地址
• method请求类型
• baseURL根路径
• transformRequest请求前的数据处理
• transformResponse请求后的数据处理
• headers自定义请求头
• paramsURL查询对象
• paramsSericalizer查询对象序列化函数
• data请求body内容
• timeout超时设置
• withCredentials跨域是否带Token
• adapter自定义请求处理
• auth身份验证信息
• responseType响应的数据格式（json\blob\document\arraybuffer\stream\text)

四、axios实例

axios作为第三方库，一般是会单独用一个文件导入，并且通过创建实例的方式在main.js中引用。

1. 创建文件夹src-->network-->request.js：

import axios from 'axios'

export function request(config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL:'http://api.tianapi.com',
    timeout: 5000
  })

  // 2.发送网络请求
  return instance(config)

}

2. 由于instance(config)返回的是一个Promise函数，所以在main.js中可直接使用then/catch处理。

request({
  url: '/topnews/index',
  params: {
    key: 'f027a004c40069bb972c207b5f8965f3'
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

五、拦截器

axios提供四种拦截器：请求成功/失败、响应成功/失败

在request.js中通过interceptors定义拦截器：

...
  // 2.拦截器
  instance.interceptors.request.use(config => {
    console.log(config);
  }, err => {
    console.log(err);
  })

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