漫漫学vue路（8）-- axios

一个项目当然是要发送网络请求的，axios是vue官方推荐的一个框架

1. axios的特点

2. axios的基本使用

axios是外部框架，当然是需要下载的(vue cli2)

npm install axios --save

我这里用第一种请求方式，axios(config)

配置config是对象，里面肯定有url，默认的method是get，也可以自己配置为post

axios支持promise，所以axios()返回的是一个Promise对象，当然可以用then方法

axios的url后面还可以query模式传参数，可直接在url后面跟?query，也可将参数写在parmas属性里面

// url: 'http://www.baidu.com?type=home&page=1'
params: {
  type: 'home',
  page: 1
}

3. axios发送并发请求

真实开发中，常常会碰到发送多个网络请求，待这多个网络请求都完成后，对拿到的数据进行统一处理。

我们知道在Promise中有all方法可以处理这种情况，axios也是可以使用 all方法 的，all方法是接收一个数组的

axios.all([
  //网络请求1
  axios({
    url: 'http://www.baidu.com'
  }),
  //网络请求2
  axios({
    url: 'http://www.sina.com',
    params: {
      type: 'profile',
      page: 5
    }
  })
]).then(results => {
  //处理第一个请求的数据
  console.log(results[0]);
  //处理第二个请求的数据
  console.log(results[1]);
})

axios还提供了一个axios.spread方法，可将多次网络请求得到的数据分离开，不用集合到一个数组里面

.then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

4. axios配置相关

前面我们在配置axios时已经用到了url、method、params

其实还有很多配置相关的属性，下面列了一些常见的配置属性

有一点需要注意

axios发送get请求时，传送的数据是用params属性的
而发送post请求呢，传送的数据是要用data属性的

而有些配置属性呢，各个网络请求是共用的，比如两个请求的baseURL一样，只是请求baseURL下的不同接口，这时就可以将baseURL公用了。还有一些网页会设置请求超时时间（timeout），超出这个时间，将不再发送网络请求，直接报错，这个也是可以公用的。

axios.defaults.baseURL = 'http://www.baidu.com'
axios.defaults.timeout = 9000

5. axios的实例

在真实开发中，若是项目非常大的话，一个服务器满足不了前端的各种需求的话，一般会有多个服务器同时工作。
比如首页界面和里面的所有内容请求的是服务器1的数据，用户界面和里面的所有内容请求的是服务器2的数据。服务器不同，url一般来说也不同。所以我们前面设置的baseURL可能现在就起不到便捷的效果了。

其实我们在前面一直是用的全局的 axios ，为了应对这种情况，我们就需要创建axios的 实例 了

//创建第一个axios实例
const instance1 = axios.create({
  baseURL: 'http://www.baidu.com',
  timeout: 8000
})
//第一个实例的第一个请求
instance1({
  url: '/home'
}).then(res => {
  console.log(res);
})
//第一个实例的第二个请求
instance1({
  url: '/category'
}).then(res => {
  console.log(res);
})

//创建第二个axios实例
const instance2 = axios.create({
  baseURL: 'http://www.sina.com',
  timeout: 6000
})
//第二个实例的第一个请求
instance2({
  url: '/profile',
  params: {
    id: '003'
  }
}).then(res => {
  console.log(res);
})

6. axios的模块封装

在项目开发中，通常来讲我们写的很多组件都是需要网络请求数据的，意味着很多组件都要使用axios。这样导致的问题就是很多组件都对axios有依赖性，若是哪一天axios这个框架不再维护了，那我们就要到每个用了axios的组件里将axios的相关代码都替换掉，这个工作量是巨大的。

所以，我们要对axios进行一次模块封装，每个组件调用这个模块进行网络请求。当axios这个框架不再维护时，我们只需在这个模块里替换掉相关代码即可

我的习惯是在src下创建一个network文件夹，文件夹里面建个request.js文件，用于封装axios模块

import axios from 'axios'

//封装多个实例，所以用函数最好,config是用这个封装好的axios时传入的配置
export function request(config) {
  const instance1 = axios.create({
    baseURL: 'http://www.baidu.com',
    timeout: 8000
  })
  //网络请求
  return instance1(config)
}

调用封装好的request模块进行网络请求

7. axios的拦截器的使用

axios还有一个拦截器，能对网络请求和服务器回应进行拦截，拦截之后对于拦截到的数据进行某些操作

请求拦截

注意：完成请求成功的某些操作后，一定要return config，不然是不能完成网络请求的，因为你拦截住了，你不还给他是不行的。

//请求拦截
  instance1.interceptors.request.use(config => {
    //对config的操作
    return config
  },err => {
    //请求失败的操作
  })

请求拦截的某些作用

响应拦截

和请求拦截一样，肯定完成操作后一定要返回拿到的数据，不过一般来说return res.data即可，因为一般只会用到返回中的数据内容

//响应拦截
  instance1.interceptors.responce.use(res => {
    //对请求的数据的操作
    return res.data
  },err => {
    //响应失败的操作
  })