掌握JavaScript中的Promise，实现异步编程 (4)

resolve()方法用于快速返回一个状态为fulfilled的Promise对象，生产环境中使用较少：

"use strict"; let task = Promise.resolve("success"); console.log(task); // Promise {<fulfilled>: "success"} reject()

reject()方法用于快速返回一个状态为rejected的Promise对象，生产环境中使用较少：

"use strict"; let task = Promise.reject("error"); console.log(task); // Promise {<rejected>: "error"} // Uncaught (in promise) error all()

all()方法用于一次同时执行多个异步任务，并且必须确保这些任务是成功的。

all()方法接收的参数必须是可迭代类型，如Array、map、set

任何一个Promise状态为rejected，都将调用catch()方法

当所有任务成功执行后，将返回一个包含所有任务的执行结果数组

all()方法应用场景还是非常广泛的，如我们需要使用Ajax请求后端的书籍与价格信息时，不论是书籍获取失败还是价格获取失败，都将认为此次任务的失败。

示例如下：

"use strict"; const getBookNameTask = new Promise((resolve, reject) => { // 模拟请求后端的书籍名称，需要花费3s setTimeout(() => { resolve(JSON.stringify( ["HTML", "CSS", "JavaScript"] )) }, 3000); }); const getBookPriceTask = new Promise((resolve, reject) => { // 模拟请求后端的书籍价格，需要花费5s setTimeout(() => { resolve(JSON.stringify( [98, 120, 40] )) }, 5000); }) // 执行任务 Promise.all( [getBookNameTask, getBookPriceTask] ) .then(value => { // 书籍和价格全部获取后才执行这里 // value = ["[\"HTML\",\"CSS\",\"JavaScript\"]", "[98,120,40]"] const bookNameArray = JSON.parse(value[0]); const bookPriceArray = JSON.parse(value[1]); const bookAndNameMap = new Map(); for (let i = 0; i < bookNameArray.length; i++) { bookAndNameMap.set(bookNameArray[i], bookPriceArray[i]); } console.log(bookAndNameMap); }) .catch(reason => { // 任何一个没获取到都执行这里 console.log(reason); }); allSettled()

allSettled()方法和all()方法相似，都是用于同时执行多个异步任务，但是它并不关心所有任务是否都执行成功。

allSettled()的状态只会是fulfilled：

"use strict"; const getBookNameTask = new Promise((resolve, reject) => { setTimeout(() => { reject("error! Can't query all books name") }, 3000); }); const getBookPriceTask = new Promise((resolve, reject) => { setTimeout(() => { reject("error! Can't query all books price") }, 5000); }) // 执行任务 Promise.allSettled( [getBookNameTask, getBookPriceTask] ) .then(value => { // 不管怎样都会执行这里 console.log("run me"); }) race()

race()也可同时执行多个任务，它仅会返回最快完成任务的执行结果。

以最快返回的任务结果为准

如果最快返回的任务状态为rejected，那么race()的状态也将视为rejected，此时将执行catch()方法

race()方法用的也比较多，如我们需要加载一些图片，这些图片在多个服务端上都有存储，但为了提高用户体验我们需要根据用户所在的地理位置选择最近的服务器，此时race()就派上了用场：

"use strict"; const getCacheImages = new Promise((resolve, reject) => { setTimeout(() => { resolve("get cache images success!!"); }, 1000); }) const getWebImages = new Promise((resolve, reject) => { setTimeout(() => { resolve("get web images success!!"); }, 3000); }) // 创建任务 Promise.race( [getCacheImages, getWebImages] ) .then(value => { console.log(value); }) .catch(reason => { console.log(reason); }) // get cache images success!! async&await async

async其实是new Promise()的语法糖简写形式。

在某一个函数前面加上async，运行该函数时将会返回一个Promise对象。

没有return：返回的Promise对象状态为fulfilled，下一个then()的onfulfilled回调函数参数value为undefined

直接return：返回的Promise对象状态为fulfilled，下一个then()的onfulfilled回调函数参数value为当前async函数的返回值

return了一个状态为fulfilled的Promise对象：下一个then()的onfulfilled回调函数参数value为当前async函数中被返回Promise里resolve()所传递的值

return了一个状态为rejected的Promise对象：下一个then()的onrejected回调函数参数reason为当前async函数中被返回Promise里reject()所传递的值，或者是被返回Promise里抛出异常的值

运行时抛出异常：返回的Promise对象状态为rejected，下一个then()的onrejected回调函数参数reason为当前async函数中抛出异常的值

示例演示：

"use strict"; async function task() { return "success" } task().then(value => { console.log(value); }); // success await

await其实是then()的另一种写法，它只能在async函数中使用。

await后面一般都会跟上一个Promise对象，如果不是Promise对象，将直接返回该值。

await使用必须在async函数中

await作为then()的语法糖形式，使用它编写代码将使代码变的更加优雅

如下所示，我们有3个任务，这3个任务必须是先通过用户ID获取人员姓名、再通过用户ID获取信息ID、最后再通过用户ID获取人员信息。