Promise 实现方法（请求）的异步（串行）执行

最新推荐文章于 2025-06-04 16:16:53 发布

zuo-yiran

最新推荐文章于 2025-06-04 16:16:53 发布

阅读量6.3k

点赞数 4

分类专栏： ES6 js 文章标签： Promise 异步执行方法 ES6

本文链接：https://blog.youkuaiyun.com/zuoyiran520081/article/details/85068301

版权

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

ES6

1 篇文章

订阅专栏

本文介绍如何使用Promise实现方法的串行调用，通过层层嵌套的方式避免回调地狱，并展示两种实现方式及其执行结果。

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

在项目的实际操作中会用到串行调用方法的情况，实现异步执行，例如
有三个方法，方法一、方法二、方法三，需要执行完方法一之后执行方法二，执行完方法二之后执行方法三，这样的串行的执行顺序可以用层层嵌套的方法来实现，但是这样的话方法嵌套的深看起来就很麻烦，可以用Promise实现，简单的模拟做法如下：

function fourO() {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
        	console.log(44444);
        	resolve();
        }, 1500);
    });
}

function threeO(){
	return new Promise(function(resolve, reject) {
        console.log(333);
        resolve(123);
    });
}

function twoO(){
	return new Promise(function(resolve, reject) {
	    console.log(222);
        resolve();
    });
}

function oneO(){
	return new Promise(function(resolve, reject) {
        console.log(111);
        resolve();
    });
}
var p = new Promise(function(resolve, reject) {
	resolve();
});

p.then(oneO)
.then(fourO)
.then(twoO)
.then(threeO)
.then(function(result) {
    console.log('Got value: 最后执行' + result);
});

执行结果如下：

11111
44444
22222
33333
Got value: 最后执行123

用方法fourO模拟接口的调用返回的时间差，这样可以控制实际运用中方法的调用的顺序。

另一种合成用一个Promise对象的方法：

function one(){
	console.log(11111);
}

function two(){
	console.log(22222);
}

function three(){
	console.log(33333);
}
function fiveP(func){
	return new Promise(function(resolve, reject) {
		func();
        resolve();
    });
}

p.then(fiveP(one))
.then(fiveP(three))
.then(fiveP(two))
.then(function(result) {
    console.log('Got value: 最后执行' + result);
});

执行结果为：

11111
33333
22222
Got value: 最后执行

记录一下，方便使用。