axios创建实例和并发（koa2+axios）

image.png
利用axios.create()创建新实例，实现特殊需求

在我们使用axios的时候，axios本身自己就会创建一个实例对象，使我们可以在该对象下调用它提供的一些方法，以此来完成我们的需求。但是，这种自带的axios实例是唯一的实例，如果我们所有的ajax操作都放在该实例上的话，其实是不太方便的，如果我们有一些特殊的需求，需要我们分开操作，这时候就需要创建一个新的实例。

比如axios的拦截器axios.interceptors,因为它是全局的，也就意味着所有发起的请求都会去跑这个拦截器，但在实际开发中如果有一些特别的需求，这种全局的拦截器操作起来非常不方便。

如果我们通过axios.create()创建一个新实例，让我们可以在一个指定的axios实例下进行指定的拦截器，这样就可以有针对性地去实现一些差异需求，而不是全局控制

其实就像vue一样，我们不妨借鉴一下，这样想一想，是不是就可以创建多个new Vue()实例了呢，然后每个实例都是针对自己区域的代码，互不影响彼此。

        <div id="app1"></div>
        <div id="app2"></div>
        <div id="app3"></div>
        
        <script type="text/javascript">
            const app1 = new Vue({
                
            }).$mount("#app1")
            
            const app1 = new Vue({
                
            }).$mount("#app2")
            
            const app1 = new Vue({
                
            }).$mount("#app3")
        </script>

---

使用axios.create创建新的实例。

image.png
案例：首先创建2个axios实例,这两个实例调用同一个接口/list,同样发起get请求,然后各自发起一个请求拦截器，携带各自的token令牌给服务器

        <script type="text/javascript"> 
            //1.首先创建2个axios实例
            const instance = axios.create()
            const instance2 = axios.create()
            
            //3.然后各自发起一个请求拦截器，携带各自的token令牌给服务器
            // 添加请求拦截器1号
            instance.interceptors.request.use(function (config) {
                // 在发送请求之前做些什么
                config.headers.token = 'myToken1'
                return config;
              }, function (error) {
                // 对请求错误做些什么
                return Promise.reject(error);
              });
              
              // 添加请求拦截器2号
              instance2.interceptors.request.use(function (config) {
                  // 在发送请求之前做些什么
                  config.headers.token = 'myToken2'
                  return config;
                }, function (error) {
                  // 对请求错误做些什么
                  return Promise.reject(error);
                });
            
            //2.这两个实例调用同一个接口/list,同样发起get请求
            instance.get('/list')
            .then(res=>{
                console.log(res)
            })
            instance2.get('/list')
            .then(res=>{
                console.log(res)
            })
        </script>

后端接口代码：

router.get('/list', async (ctx, next) => {
    console.log(ctx.request.query)
    ctx.body = {
        errCode:0,
        errMsg:"ok",
        list:[
            {"userName":"覃放","age":22}
        ]
    }
})

效果预览：
控制台响应回来的信息：

Network查看请求信息：

image.png

---

axios并发操作

axios的并发操作不是重复请求，不要混淆

重复请求：频繁发起同一个请求，但请求的还是自己（如下图）。

---

并发请求：是同一时间发起多个请求，希望等这些请求触发后，再统一去触发then函数和catch函数，类似Promise.all()方法，只不过axios.all()方法对它做了一层封装，实现并发操作。

image.png
案例演示：
浏览器发起请求

        <script type="text/javascript"> 
            //发起2个请求
            const xhr1 = axios.get('/list')
            const xhr2 = axios.get('/list2')
            //等待xhr1和xhr2请求完成再后统一触发axios.all()
            axios.all([xhr1,xhr2])
            .then(res=>{
                console.log(res)
            })
            .catch(err=>{
                console.log(err)
            })
        </script>

服务器接口代码：

router.get('/list', async (ctx, next) => {
    console.log(ctx.request.query)
    ctx.body = {
        errCode:0,
        errMsg:"ok",
        list:[
            {"userName":"覃放","age":22}
        ]
    }
})
router.get('/list2', async (ctx, next) => {
    console.log(ctx.request.query)
    ctx.body = {
        errCode:0,
        errMsg:"ok",
        list:[
            {"userName":"覃放","age":22}
        ]
    }
})

浏览器预览服务器响应回来的效果：我们可以看到是一个数组形式

---

而"并发请求"值得注意的是：如果这个axios.all()统一执行当中，但凡其中

            const xhr1 = axios.get('/list')
            const xhr2 = axios.get('/list2')

有一个发生请求错误，都会去执行catch方法捕错。

            .catch(err=>{
                console.log(err)
            })

---

此外，如果我们不想响应回来一个这样一种数组的形式的话（如下图），

因为我们想渲染数据到页面，就需要用到遍历，多个数组凑在一起遍历起来就有点麻烦。

axios.all()就提供了一个展开的方式axios.spread(),有点类似拓展运算符的形式（如下图），方便我们拿到一个个的对象。

        <script type="text/javascript"> 
            //发起2个请求
            const xhr1 = axios.get('/list')
            const xhr2 = axios.get('/list2')
            //等待xhr1和xhr2请求完成再后统一触发axios.all()
            axios.all([xhr1,xhr2])
            .then(axios.spread((res1,res2) => {
                console.log(res1,res2)
            }))
        </script>

总结：

看到了并发，不知你脑海中会不会闪过“高并发”的字眼？