细谈Axios中那些不为人知的秘密！一文读懂Axios（二）

6、并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。类似promise.all。

在下面例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：

// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
   axios.spread((dataRes, cityRes) => { 
        console.log(dataRes, cityRes);
   })
);

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

Axio实例

1、axios实例的创建

比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。

思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：

// 实例1
let instance = axios.create({ 
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/data.json').then(res=>{ 
  console.log(res)
})
//实例2
let instance2 = axios.create({ 
  baseURL: "http://loacalhost:8081",
  timeout: 2000
});
instance2.get("/city.json").then(res => { 
  console.log(res);
});

备注：此时我们就可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

2、axios实例的相关配置

（1）配置列表

baseURL：请求的域名（基本地址）。

timeout：请求的超时时长，超出后后端返回401。

备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。

url：请求路径。

method：请求方法。如：get、post、put、patch、delete等。

headers：请求头。

params：将请求参数拼接到url上

data：将请求参数放置到请求体里  

axios.create({
    baseURL:'', //请求的域名（基本地址）
    timeout:2000, //请求的超时时长，单位毫秒，默认。
    url:'/data.json', //请求路径
    method:'get', //请求方法
    headers:{ 
        token:''
    }, //设置请求头
    params:{ 
    },//将请求参数拼接到url上
    data:{ 
    }, //将请求参数放置到请求体里
});

（2）三种配置方式

• axios全局配置

1. axios.defaults.baseURL = ‘http://localhost:8080‘
2. 
3. axios.defaults.timeout = 2000

• axios实例配置

1. let instance = axios.create();
2. 
3. instance.defaults.timeout = 3000

• axios请求配置

1. instance.get(‘/data.json’,{
2. 
3. timeout:5000
4. })

优先级：axios全局配置 < axios实例配置 < axios请求配置

3、常用参数配置的使用方法

举例1：

let instance1 = axios.create({ 
        baseURL:'http://localhost:9090',
        timeout:1000
    })
    instance1.get("/contactList",{ 
        params:{ 
            id:10
        }
    }).then(res=>{ 
        console.log(res)
    })

分析：配置的参数为baseURL：‘http://localhost:9090’，timeout:1000，method:‘get’，params:\{ id:10}，url:’/contactList’

举例2：

let instance2 = axios.create({ 
        baseURL:'http://localhost:9091',
        timeout:3000
    })
    instance2.get("/contactList",{ 
        timeout:5000
    }).then(res=>{ 
        console.log(res)
    })

分析：配置的参数为baseURL：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactList’

注意：最终的有效配置是由优先级高的覆盖优先级低的。