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));

巴特西