Promise解决JavaScript异步任务导致函数执行结束顺序与代码顺序不一致问题

jco657

已于 2022-04-13 00:03:02 修改

阅读量898

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-04-12 23:50:14 首次发布

本文链接：https://blog.csdn.net/jco657/article/details/124137272

版权

JavaScript 异步执行 Promise 回调函数函数执行顺序

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript代码的执行，不像单线程编程中，一段代码执行结束再执行下一段，JavaScript代码的执行是异步的，例如一段代码先调用了函数f1()，再调用了函数f2()，结果可能是函数f2()的执行结果先出来，例如如下js代码，函数f2()的结果先输出，因为此时f1()还没执行结束，console.log(c)输出是undefined。

function f1(a,b){
    //调用后，等待3秒输出字符F1
    setTimeout(function(){
        console.log('F1');
        return a+b;
        },3000);
}

function f2(c){
    //调用后，输出字符F2
    console.log('F2');
    console.log(c);
}

var result = f1(1,2);
f2(result);

我们可以通过回调函数或者Promise来解决这个问题。本文将演示通过Promise来解决结果输出顺序问题，即让f1()的结果先输出。修改后代码如下：

function f1(a,b){
    
	return new Promise(function(resolve, reject){
	//调用后，等待3秒输出字符F1
    setTimeout(function(){
        console.log('F1');
		var tempResult = a+b
        //将正常返回值传给resolve
        resolve(tempResult) ;
        },3000);
	})
}

function f2(c){
    //调用后，输出字符F2
    console.log('F2');
    console.log(c);
}

//通过.then执行f2()，f1()的执行结果可以在.then()里，被f2()调用
f1(1,2).then(function(result){
	f2(result);
	});