按顺序执行异步请求

QiBarbara

于 2021-07-12 20:26:39 发布

阅读量503

点赞数

分类专栏：前端文章标签： ajax

本文链接：https://blog.youkuaiyun.com/weixin_41606276/article/details/118683165

版权

前端专栏收录该内容

63 篇文章

订阅专栏

本文总结了三种处理异步请求顺序的方法：1) 使用Promise实现链式调用确保执行顺序；2) 利用Generator函数配合co库控制流程；3) 结合setTimeout模拟异步操作的先后顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结常用方式

1、Promise：

function first(){
    return new MyPromise(function (resolve, reject) {
        console.log('执行1')
        setTimeout(() => {
            console.log('1请求结束')
            resolve('1返回参数')
        }, 1000);
    });
}
function second(){
    return new MyPromise(function (resolve, reject) {
        console.log('执行2')
        setTimeout(() => {
            console.log('2请求结束')
            resolve('2返回参数')
        }, 1000);
    });
}
function third(){
    return new MyPromise(function (resolve, reject) {
        console.log('执行3')
        setTimeout(() => {
            console.log('3请求结束')
            resolve('3返回参数')
        }, 1000);
    });
}

first().then(second).then(third).then( res => {
    console.log(3返回参数)
})

2、Generator

function first(msg) {
    setTimeout(() => {
        console.log('第一个请求 compile', msg),
            it.next('第一个请求 result');
    }, 2000)
}
function second(msg) {
    setTimeout(() => {
        console.log('第二个请求 compile', msg),
            it.next('第二个请求 result');
    }, 2000)
}
function third(msg) {
    setTimeout(() => {
        console.log('第三个请求 compile', msg),
            it.next('第三个请求 result');
    }, 2000)
}

function *excute(){
    var result = yield first("执行开始");
    var data2 = yield second(result);
    var data3 = yield third(data2);
    console.log('执行结束', data3);
}


 
var it = main();
it.next();
console.log("执行完毕");

3、setTimeout

function first() {    
    setTimeout(() => {        
        console.log('执行1')        
        setp2('1传递的参数')    
    }, 2000);
}
function second(data) {    
    setTimeout(() => {        
        console.log('执行2', data)        
        setp3('2传递的参数')    
    }, 2000);
}
function third(data) {    
    setTimeout(() => {        
        console.log('执行3', data)    
    }, 2000);
}

first();