面试题:Promise用法及理解

102 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

一. Promise由来

es6之前,我们处理异步函数非常麻烦,需要自己定义回调函数让使用者传入,才可以进行正常的回调;但是这样做没有一个固定的格式,那么不同开发者开发的方法,需要传入的回调函数顺序,格式也各不相同,对于需要使用其他框架的开发者来说非常痛苦,学习成本很高;而且ajax很容易出现回调地狱,es6推出了Promise类,就是为了解决这一现象的。

二. Promise解决异步

Promise是es6新推出的一个类,顾名思义就是许诺,承诺;意思是给开发者一个承诺,代码执行成功或者失败,都会执行规定好的回调函数。

写法:promise类中需要传入一个函数,函数内部也有两个参数,分别是resolve和reject,对应成功和失败的回调。

function fun(num) {
	const promise = new Promise((resolve, reject) => {
		setTimeout(() => {
			if (num > 0) {
				resolve(`${num},大于0`)
			} else {
				reject(`${num},小于0`)
			}
		})
	})
}

fun(10).then(res => console.log(res))
fun(-1).catch(err => console.log(err))

三. Promise状态区分

pending:执行时状态

fulfilled:已完成,执行resolve

rejected:操作失败,执行reject

四. resolve传入不同值的区别

传入正常数值或者对象,会作为.then回调函数的参数

传入promise对象,那么会看这个对象执行的结果

传入对象带then方法,那么会执行该方法,根据结果决定状态

五. 多次调用then、catch

then、catch返回值也是promise,所以可以多次调用

const promise = new Promise((resolve, reject) => {
	resolve('aaa')
})

promise.then(res=>{
	console.log(res) // aaa
	return 'bbb'
}).then(res => {
	console.log(res) // bbb
})

promise.then(res => {
	console.log(res) // aaa
})

六. finally

不管Promise是什么状态,都会执行finally!

七. all、allSettled方法

Promise类提供了一个all方法,可以把多个promise实例放到一起,形成新的Promise,新Promise的状态由内部所有Promise决定,当内部都是fulfilled状态,它才是fulfilled,把所有Promise返回值放到一个数组里返回;有一个rejected,那就是rejected

const p1 = new Promise()
const p2 = new Promise()
const p3 = new Promise()

Promise.all([p1,p2,p3]).then(res=> {
	console.log("all promise res:", res)
})

allSettled方法就是返回每个promise的结果,无论状态如何

Promise.allSettled([p1, p2, p3]).then(res => { console.log("all settled:", res) })