JS学习-Promise

Promise

一个 Promise 必然处于以下几种状态之一：

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

如果一个 promise 已经"被兑现（fulfilled）"或"被拒绝（rejected）"，那么我们也可以说它处于"已敲定（settled）"状态。

您还会听到一个经常跟 promise 一起使用的术语："已决议（resolved）"，任何不是 throw 的终止都会创建一个"已决议（resolved）"状态，而以 throw 终止则会创建一个"已拒绝（rejected）"状态。

链式调用

const myPromise = (new Promise(myExecutorFunc))
					.then(handleFulfilledA)
					.then(handleFulfilledB)
					.catch(handleRejectedAny)
					.finally(handleFinalAny);

自定义Promise

const promiseA = new Promise( (resolve,reject) =>{resolve(777);});
// 这时，"promiseA" 已经被敲定了。
promiseA.then( (val) => console.log("asynchronous logging has val:",val) );

构造函数

new Promise((resolve,reject)=>{})

function fetchUserList(url) {
	return new Promise((resolve, reject) => {
		const xhr = new XMLHttpRequest()
		xhr.open("GET", '/user/list')
		xhr.onload = () => resolve(xhr.responseText)
		xhr.onerror = () => reject(xhr.statusText)
		xhr.send()
	});
}

静态方法

all
- 如果传入的参数是一个空的可迭代对象，则返回一个已完成（already resolved）状态的Promise。
- 如果传入的参数不包含任何 promise，则返回一个异步完成（asynchronously resolved） Promise。
- 其它情况下返回一个处理中（pending）的Promise。

//注：Array，Map，Set都属于ES6的iterable类型

Promise.all(iterable);
const p1 = Promise.resolve(3),p2 = Promise.reject(4),p4 = 42,p5="42";
const p3 = new Promise((resolve, reject) => {
	setTimeout(resolve, 100, 'foo');
});
Promise.all([p1, p4, p3]).then((values) => {
	console.log(values);
});
Promise.all([p4, p5]).then((values) => {
	console.log(values);
});
p2.then(v=>{console.log(v);}).catch(e=>{
	console.log('error:',e);
});
/*
> Array [42, "42"]
> "error:" 4
> Array [3, "foo", "foo"]
*/

allsettled：返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

Promise.allSettled(iterable);
const p1 = Promise.resolve(1),p2 = Promise.reject(2);
Promise.allSettled([p1,p2]).then((res) => console.log(res));
//Array[Object{status: "fulfilled",value: 1},Object{status:"rejected",reason:2}]

any：接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。

Promise.any(iterable);
const p1 = Promise.resolve(1),p2 = Promise.reject(2);
Promise.any([p2,p1])
		.then((res) => console.log(res))
		.catch((e)=>console.log('error;',e));//1

race：返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

Promise.race(iterable);
const p1 = Promise.resolve(1),p2 = Promise.reject(2);
Promise.race([p2,p1])
		.then((res) => console.log(res))
		.catch((e)=>console.log('error;',e));//"error;" 2

reject：返回一个带有拒绝原因的Promise对象。
```
Promise.reject(reason);
```
resolve：返回一个以给定值解析后的Promise 对象。
```
Promise.resolve(value);
```

原型

方法

then(onFufilled,onRejected)：返回一个 Promise
catch(onRejected)：返回一个Promise (en-US)，并且处理拒绝的情况。
finally(onFinally)：返回一个Promise。在promise结束时调用。
- 由于无法知道promise的最终状态，所以finally的回调函数中不接收任何参数，它仅用于无论最终结果如何都要执行的情况。

注意: 在finally回调中 throw（或返回被拒绝的promise）将以 throw() 指定的原因拒绝新的promise.

事件处理函数

rejectionhandled：当Promise被rejected且有rejection处理器时会在全局触发rejectionhandled 事件(通常是发生在window下，但是也可能发生在Worker中)。应用于调试一般应用回退。
```
window.addEventListener("rejectionhandled", event => {
	console.log("Promise rejected; reason: " + event.reason);
}, false);
```

unhandledrejection：当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。

//onunhandledrejection(event:{promise,reason})
window.addEventListener("unhandledrejection", event => {
	console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});

window.onunhandledrejection = event => {
	console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
	// 防止默认处理（例如将错误输出到控制台）
	event.preventDefault();
};

Promise 与 async/await

function foo() {
	doSomething()
		.then(result => doSomethingElse(result))
		.then(newResult => doThirdThing(newResult))
		.then(finalResult => console.log(`Got the final result: ${finalResult}`))
		.catch(failureCallback);
}

async function foo() {
	try {
		const result = await doSomething();
		const newResult = await doSomethingElse(result);
		const finalResult = await doThirdThing(newResult);
		console.log(`Got the final result: ${finalResult}`);
	} catch(error) {
		failureCallback(error);
	}
}

旧式回调API

setTimeout

setTimeout(() => saySomething("10 seconds passed"), 10000);

问题：如果 saySomething 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 setTimeout。
解决方法：可以用 Promise 来封装它。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们解决方法：可以用 Promise 来封装它。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
wait(10000)
	.then(() => saySomething("10 seconds")).catch(failureCallback);

组合Promise

多个并行

Promise.all([func1(), func2(), func3()])
	.then(([result1, result2, result3]) => { 
		/* use result1, result2 and result3 */ 
	});

reduce时序

[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
				.then(result3 => { /* use result3 */ });

Promise链

Promise.resolve().then(func1).then(func2).then(func3);

函数式reduce时序

const applyAsync = (acc,val) => acc.then(val);
const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));

async/await时序

let result;
for (const f of [func1, func2, func3]) {
	result = await f(result);
}

示例：() => x 是 () => { return x; } 的简写。

doSomething()
	.then(function(result) {return doSomethingElse(result);})
	.then(newResult => doThirdThing(newResult))
	.catch(error => console.log(error));

posted @ 2022-08-12 14:26 ~LemonWater 阅读(65) 评论(0) 编辑收藏举报

刷新页面返回顶部

~LemonWater