JavaScript中Promise的原理是什么及如何使用

发布时间：2023-03-23 14:07:44 作者：iii
来源：亿速云阅读：209

这篇文章主要介绍了JavaScript中Promise的原理是什么及如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript中Promise的原理是什么及如何使用文章都会有所收获，下面我们一起来看看吧。

按照我往常的理解，Promise是一个构造函数，有all、resolve、reject、then、catch等几个方法，一般情况下，在涉及到异步操作时才会用到Promise。

所以我接下来先new一个Promise对象，并在其中进行一些异步操作：

// 使用Promise的时候一般会把它包裹在一个函数中，并在函数的最后返回这个Promise对象
function runPro()(
    var a = new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('work done!');
            resolve('success');
        }, 1000);
    });
    return a;
)
runPro()

在上面的代码中，Promise的构造函数接收一个箭头函数作为参数，这个箭头函数又有两个参数，分别是resolve和reject，我在这个箭头函数中使用setTimeout进行了一些异步操作，异步操作中执行了resolve方法，并给resolve方法传了一个字符串‘success’作为参数。

执行这段代码会发现，等待了1秒钟后（因为我在setTimeout中设置的等待时间是1000毫秒），输出了‘work done!’。

这时候并没有发现Promise有什么特别的作用，而且resolve和reject这两个的作用也并没有体现出来。

之前我们说过Promise这个构造函数上有then、catch方法，在上面的代码片段中，runPro函数最后return了一个Promise对象，所以我们可以在runPro函数执行完成之后使用then对Promise对象进行进一步的操作：

runPro().then((res) => {
    console.log('then:', res);
    //TODO something
});

输出结果：

JavaScript中Promise的原理是什么及如何使用

在runPro返回的Promise对象上直接调用then方法，then方法接收一个函数作为参数A，并且这个箭头函数也会接收一个参数B，这个参数B的值就是前面代码中resolve方法所传递的字符串‘success’。

执行代码，会在1秒后首先输出‘work done！’，紧接着输出‘then: success’。

这个时候，就可以简单的体现出来Promise的作用了，在前面的代码中，then方法就像是Promise的回调函数，当Promise中的异步操作执行完之后，通过链式调用的方式执行回调函数。

这里的关键点就在于链式调用上，当实际使用中遇见多层回调的情况时，Promise的强大之处才能够体现出来：

function runPro2(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro2');
		}, 1000);
	});
	return a;
};

function runPro3(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro3');
		}, 1000);
	});
	return a;
};

runPro().then(() => {
	return runPro2();
}).then(() => {
	return runPro3();
}).then(() => {
	console.log('all done')
})

到这里为止，大概已经明白了，Promise是一个在异步操作过程中，等待其中异步操作完成之后执行其回调函数的一种结构体。但是其中的原理还是模糊不清，其中resolve和reject这两个参数还没有搞清楚，只知道在前面的几个代码片段中都调用了resolve函数，resolve是做什么的并没有体现出来。

关于resolve和reject，我以前的理解是Promise中的异步操作执行成功后调用resolve函数，异步操作执行失败后调用reject函数，后来发现这种理解其实是不准确的。

在理解这两个函数的正确作用之前，我们首先要知道Promise一个重要的特性：状态

Promise的状态：

一个Promise对象的当前状态必须为以下三种状态中的一种：等待（Pending）、完成（Fulfilled）、拒绝（Rejected）。

Pending：

异步操作完成之前，Promise处于等待状态，这时候的Promise可以迁移至Fulfilled或者Rejected。

Fulfilled：

异步操作完成之后，Promise可能从Pending状态迁移至Fulfilled状态，Fulfilled状态的Promise必须拥有一个不可变的终值，并且Fulfilled状态的Promise不能迁移为其他状态。

Rejected:

异步操作完成之后，Promise可能从Pending状态迁移至Rejected状态，Rejected状态的Promise必须拥有一个不可变的拒绝原因，并且Rejected状态的Promise不能迁移为其他状态。

了解了Promise的三种状态之后，我们再来说说resolve和reject这两个函数的作用：

resolve函数将Promise设置为Fulfilled状态，reject函数将Promise设置为Rejected状态。
设置为Fulfilled或者rejected状态后，即表示Promise中的异步操作执行完成，这时程序就会执行then回调函数。
resolve和reject函数传递的参数，将由then函数中的箭头函数接收。

实际上，理解Promise的关键点就在于这个状态，通过维护状态、传递状态的方法来进行及时的回调。

所以，如下面代码所示，当使用Promise进行异步操作的时候，其中有几个关键点需要特别注意：

在一个函数中new了一个Promise对象之后，函数的最后必须把这个Promise对象return出来，否则这个函数就无法使用then函数进行回调；

异步操作中必须执行resolve或者reject函数，否则这个Promise一直处于Pending状态，代码就不会执行它的回调函数。

function runPro(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('resolve');
			console.log('this is runPro');
		}, 1000);
	});
	return a;
}

runPro().then((res) => {
	console.log(res);
})

同样的道理，当异步操作执行失败时，代码通过执行reject函数的方式，将Promise的状态设置为Rejected，并返回一个拒绝原因：

function runPro(item){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			if(item >= 18) {
				console.log('item 大于 18');
				resolve('一切正常！');
			}else {
				console.log('item 小于 18');
				reject('18+电影不允许放映！');
			}
		}, 1000);
	});
	return a;
}

runPro(13)
.then((res) => {
	console.log('resolve:',res);
},(rej) => {
	console.log('reject:', rej);
})

我们给runPro函数传递不同的参数，runPro接受参数后进行一个异步的判断，如果这个参数的值小于18，执行reject函数，反之则执行resolve函数，异步操作完成之后，执行then回调函数，这里的回调函数可以接收两个箭头函数作为参数，分别对应了resolve函数的回调和reject函数的回调，这两个箭头函数可以分别拿到resolve和reject传递的参数。

如下面截图所示，分别给runPro传递两个不同值后，得到了两种不同的结果：

JavaScript中Promise的原理是什么及如何使用

catch函数的用法

在Promise中，catch函数可以替代reject函数使用，用来指定接收reject的回调：

function runPro(item){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			if(item >= 18) {
				console.log('item 大于 18');
				resolve('一切正常！');
			}else {
				console.log('item 小于 18');
				reject('18+电影不允许放映！');
			}
		}, 1000);
	});
	return a;
}

runPro(13)
.then((res) => {
	console.log('resolve:',res);
})
.catch((rej) => {
	console.log('catch:', rej);
})

如上面代码所示，对调函数then只有一个箭头函数作为参数，这种情况下，这个箭头函数就被指定用来接收resolve函数的回调，而reject函数的回调则被catch函数来接收：

JavaScript中Promise的原理是什么及如何使用

这个地方使用catch函数来接收reject的回调有一个优点，当前面的then回调函数中出现位置错误时，catch函数可以对错误信息进行处理，而不会导致代码报错。这个原理和常用的try/catch语句相同。

function runPro(item){
    var a = new Promise((resolve, reject) => {
        setTimeout(() => {
            if(item >= 18) {
                console.log('item 大于 18');
                resolve('一切正常！');
            }else {
                console.log('item 小于 18');
                reject('18+电影不允许放映！');
            }
        }, 1000);
    });
    return a;
}
runPro(19)
.then((res) => {
    console.log(adc); // 这里的adc是一个未定义的变量，当代码执行到这里时，会抛出Error信息导致代码卡死
    console.log('resolve:',res);
}, (rej) => {
    console.log('reject:',rej);
});
runPro(19)
.then((res) => {
    console.log(abc); // 这里的abc是一个未定义的变量，但是由于后边使用.catch函数进行了异常捕获，所以程序不会报错。而且错误原因也会作为参数传递到后面.catch函数的参数中
    console.log('resolve:',res);
})
.catch((rej) => {
    console.log('catch:', rej);
})

JavaScript中Promise的原理是什么及如何使用

all函数 / race函数并行异步操作

Promise的all函数和race函数都提供了并行异步操作的能力，二者的区别在于,当这些并行的异步操作耗时不同时，all函数是在所有的异步操作都执行完之后才会执行，而race函数则会在第一个异步操作完成之后立即执行。

function runPro1(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro1');
		}, 1000);
	});
	return a;
}
function runPro2(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro2');
		}, 2000);
	});
	return a;
};

function runPro3(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro3');
		}, 3000);
	});
	return a;
};

Promise.all([runPro1(), runPro2(), runPro3()])
.then((res) => {
	console.log('all:', res);
})

JavaScript中Promise的原理是什么及如何使用

function runPro1(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro1');
		}, 1000);
	});
	return a;
}
function runPro2(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro2');
		}, 2000);
	});
	return a;
};

function runPro3(){
	var a = new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve('success');
			console.log('this is runPro3');
		}, 3000);
	});
	return a;
};

Promise.races([runPro1(), runPro2(), runPro3()])
.then((res) => {
	console.log('all:', res);
})

JavaScript中Promise的原理是什么及如何使用

如上两个代码片段所示，all函数和race都接收一个数组作为参数，这个数组中的值就是我们要进行并行执行的异步操作。这里我们同样使用then函数作为异步操作完成的回调函数。同时我们通过console输出发现，在race函数的回调函数开始执行的时候，另外两个没有执行完成的异步操作并没有停止，依旧在执行。

关于“JavaScript中Promise的原理是什么及如何使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript中Promise的原理是什么及如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

JavaScript中Promise的原理是什么及如何使用

相关阅读