axios并发请求与参数配置

axios并发请求

axios的并发请求其实并不是某一精确的时间段发送出两条异步消息而是在两条消息的状态完成之后能够执行同一个回调函数

手动实现并发请求

并发请求其实就是多次请求而且能够在同时间处理同状态的两个请求

// 设置一个空对象 承载两次请求的结果
let endResult= {}
//  第一次请求发起
axios.get(url).then(result=>{
        // 此时在第一次请求的回调中 不处理数据
        endResult.firstResult= result
        alert("第一次请求完成")
        // 发起第二次请求
        return axios.get(url).then(result=>{
            // 在第二次请求的回调中处理两次请求的数据
            endResult.secondResult= result
            console.log(endResult)
        })
    })

/* 服务端 */

/*
 *  模拟服务端 接受客户端请求然后相应
 */
// 导入express模块
let express = require('express');
let static= require('static')
let cors= require('cors');
// 初始化express模块 得到服务端对象
let app = express();
app.use(cors());

let count = 0
// 监听 ‘根url’
app.get('/',(req,res,err)=>{
    // 每次访问count++ 帮助客户端 确认访问的次数
    count++
    res.end('您是第'+count+'次访问');
});
// 开启服务监听请求
app.listen(80,'127.0.0.1',()=>{
    console.log('服务器开启成功');
});

结果:

axios的并发请求处理

axios的处理并发请求用到了all方法,把所有的请求返回的promise存储在数组中，用all方法来处理回调函数，但是只有所有的请求全部成功才会执行all方法下的回调

客户端同上:

// 客户端
let url= 'http://127.0.0.1/';
    let sendArr=[
        axios.get(url),
        axios.get(url),
        axios.get(url)
    ];
    axios.all(sendArr).then(result=>{
        console.log(result);
    })

结果:

并且还可使用axios.speard方法

使用axios.speard修改上述代码

let url= 'http://127.0.0.1/';
    let sendArr=[
        axios.get(url),
        axios.get(url),
        axios.get(url)
    ];
    axios.all(sendArr).then(axios.spread((firstParm,secondParm,thirdParm)=>{
        console.log(firstParm);
        console.log(secondParm);
        console.log(thirdParm);
    }))

结果:

对比直接处理返回数组的方法，可以精确的确认的每一次请求的返回参数，不需要在进行数组操做，而且参数的顺序跟请求的顺序一致

axios并发请求个别出错

let url= 'http://127.0.0.1/';
let sendArr=[
    axios.get(url+'1'),
    axios.get(url),
    axios.get(url)
];
axios.all(sendArr).then(axios.spread((firstParm,secondParm,thirdParm)=>{
    console.log(firstParm);
    console.log(secondParm);
    console.log(thirdParm);
}))

在这里我仔细思考之后发现，并发请求之后统一处理如果有一个请求错误了，那么是不是确实需要全盘推倒呢？

其实是可以在处理返回数据时，自己来完成某个请求错误之后的解决方案

改进代码继续分析

let url= 'http://127.0.0.1/';
    let sendArr=[
        axios.get(url+'1').catch((err)=>{
            if(err.response){
                console.log(err.response.status);
                console.log(err.response.headers);
            }else if(err.request){
                console.log(err.request)
            }else{
                console.log(err.message)
            }
        }),
        axios.get(url),
        axios.get(url)
    ];
    axios.all(sendArr).then(axios.spread((firstParm,secondParm,thirdParm)=>{
        console.log(firstParm);
        console.log(secondParm);
        console.log(thirdParm);
    }))

结果:

结果加了catch之后，发现spread是可以完成这种需求的

那么改成then的统一处理再看一下

同样也是可以的，但是必须要使用catch来处理错误

并且如果不加catch处理的话，其他的请求是可以成功发送的但是再回调中无法处理返回数据，所以一旦某一个请求出现了错误，可能带来意想不到的结果
————————————————
版权声明：本文为CSDN博主「Mahometan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44111750/article/details/108519064

【异步技术】Axios并发请求 2021-07-14

axios并发请求与参数配置