记录 Promise 的方法

安琪拉的灰烬

Promise 是异步编程的一种解决方案，比传统的回调函数或事件更合理和更灵活。
Promise 方法

Promise的原型方法：then/catch/finally，这三种方法很常用，then用于处理Promise转为fulfilled状态时的代码，catch用于处理Promise转为rejected状态时的代码（当然then的第二个参数也可处理rejected状态），而finally用于不管Promise状态怎样转换都会最终执行的代码。

promise的then方法的第二个参数和catch方法都可以处理rejected状态，但它们之间有一些区别：

• then的第二个参数只能处理当前的promise，而catch方法可以处理任意位置的rejected状态。所以，如果多个then方法链式调用中有多个rejected状态，可以在最后使用一个catch方法来处理。
  
• then的第二个参数和catch方法的返回值不同。then的第二个参数返回的是一个新的promise对象，而catch方法返回的是一个值或一个新的promise对象。如果返回的是一个值，则会被自动包装成一个resolved状态的promise。
  
• catch方法比then的第二个参数更简洁，更易读。因为catch方法只处理rejected状态，而then方法需要在第一个参数中同时处理resolved和rejected状态。
  

Promise的静态方法： Promise.all、Promise.allSettled、Promise.any、Promise.race、Promise.resolve、Promise.reject。
Promise 静态方法

Promise.resolve和Promise.reject用于一开始就创建 fulfilled或rejected状态的Promise，其他的静态方法传参是Promise实例数组，差异在于处理实例数组的方式和结果。
Promise.all

并行执行多个Promise对象，并在所有Promise对象都成功时返回一个新的Promise对象，其resolve值为一个包含所有Promise结果的数组，如果其中一个Promise对象失败，则返回一个reject的Promise对象，其值为第一个失败的Promise的reject值。

1. ;(async () => {
2.   const promise1 = Promise.resolve('Hello')
3.   const promise2 = 42
4.   // const promise2 = Promise.reject('Error')
5.   const promise3 = new Promise((resolve, reject) => {
6.     setTimeout(resolve, 1000, 'Goodbye')
7.   })
8.   // const promise4 = Promise.reject('Error2')
10.   try {
11.     const result = await Promise.all([promise1, promise2, promise3])
12.     // 成功输出：[ 'Hello', 42, 'Goodbye' ]
13.     console.log(result)
14.   } catch (e) {
15.     // 失败输出：Error
16.     console.log(e)
17.   }
18. })()

复制代码

Promise.allSettled

并行执行多个Promise对象，返回一个新的Promise对象（状态一定是fulfilled），其resolve值为一个包含所有Promise结果的数组，其中每个元素都是对象，包含Promise对象的状态和结果。

1. ;(async () => {
2.   const promise1 = Promise.resolve('Hello')
3.   const promise2 = 42
4.   // const promise2 = Promise.reject('Error')
5.   const promise3 = new Promise((resolve, reject) => {
6.     setTimeout(resolve, 1000, 'Goodbye')
7.   })
8.   // const promise4 = Promise.reject('Error2')
10.   try {
11.     const result = await Promise.allSettled([promise1, promise2, promise3])
12.     // 成功输出：
13.     // [
14.     //   { status: 'fulfilled', value: 'Hello' },
15.     //   { status: 'fulfilled', value: 42 },
16.     //   { status: 'fulfilled', value: 'Goodbye' }
17.     // ]
18.     console.log(result)
19.     // 失败输出：
20.     // [
21.     //   { status: 'fulfilled', value: 'Hello' },
22.     //   { status: 'rejected', reason: 'Error' },
23.     //   { status: 'fulfilled', value: 'Goodbye' }
24.     // ]
25.   } catch(e) {
26.     // 不会执行
27.       console.log('error:', e)
28.   }
30.   Promise.allSettled([promise1, promise2, promise3]).then((result) => {
31.     // 成功输出：
32.     // [
33.     //   { status: 'fulfilled', value: 'Hello' },
34.     //   { status: 'fulfilled', value: 42 },
35.     //   { status: 'fulfilled', value: 'Goodbye' }
36.     // ]
37.     console.log(result)
38.     // 失败输出：
39.     // [
40.     //   { status: 'fulfilled', value: 'Hello' },
41.     //   { status: 'rejected', reason: 'Error' },
42.     //   { status: 'fulfilled', value: 'Goodbye' }
43.     // ]
44.   })
45. })()

复制代码

Promise.all和Promise.allSettled的区别：

• Promise.all方法返回的一个Promise对象状态将取决于所有Promise对象的状态。如果其中有任何一个Promise对象被rejected了，那么这个新的Promise对象也会被rejected，并且它的值为第一个被rejected的那个Promise对象的值。
  
• Promise.allSettled方法返回的一个Promise对象状态一定是fulfilled。这个返回的Promise对象的值是一个数组，数组中包含了所有Promise对象的状态和值信息。即便其中有任何一个Promise对象被rejected了，也不会影响这个新的Promise对象的状态。
  
• 错误处理方面，Promise.all只能捕获处理第一个错误状态，如果需要处理所有状态需要改造（如：每个promise设置catch处理、同步请求/异步等待）或者使用 Promise.allSettled，具体需要怎么做看自己的需求
  

Promise.any

并行执行多个Promise对象，并返回一个新的Promise对象，其resolve值为第一个成功的Promise对象的resolve值，如果所有Promise对象都失败，则返回一个reject的Promise对象，其值为一个AggregateError对象，其中包含所有Promise对象的reject值。

1. const promise1 = Promise.reject("error1")
2. const promise2 = Promise.reject("error2")
3. const promise3 = Promise.resolve("success")
4. // const promise3 = Promise.reject("error3")
6. Promise.any([promise1, promise2, promise3]).then((value) => {
7.   // 成功输出：success
8.   console.log(value)
9. }).catch((error) => {
10.   // 失败输出：
11.   // [AggregateError: All promises were rejected] {
12.   //   [errors]: [ 'error1', 'error2', 'error3' ]
13.   // }
14.   console.log(error)
15. })

复制代码

Promise.race

并行执行多个Promise对象，并返回一个新的Promise对象，其resolve值为第一个完成的Promise对象的resolve值，如果所有Promise对象都失败，则返回一个reject的Promise对象，其值为第一个失败的Promise的reject值。

1. const promise1 = Promise.reject("error1")
2. const promise2 = Promise.reject("error2")
3. const promise3 = Promise.resolve("success")
4. // const promise3 = Promise.reject("error3")
6. Promise.race([promise1, promise2, promise3]).then((value) => {
7.   // 成功输出：error1
8.   console.log(value)
9. }).catch((error) => {
10.   // 失败输出：error1
11.   console.log(error)
12. })

复制代码

Promise.race和Promise.any的区别：

• Promise.race会在其中任意一个Promise对象状态改变（即fulfilled或rejected）时立即返回结果，而Promise.any只会在其中任意一个Promise对象fulfilled时返回结果。
  
• 当所有Promise对象都被rejected时，Promise.race会返回被rejected的Promise对象的结果，而Promise.any会抛出AggregateError异常。
  
• 如果Promise.race传入的参数是空数组，它会一直处于pending状态，而Promise.any会立即抛出AggregateError异常。（另外：Promise.all和Promise.allSettled返回fulfilled状态）
  

使用Promise实现站点预检

这是前几天实现的站点预检：判断所有网站链接是否有效，并返回测试的结果。思路：通过get请求测试，考虑请求之间没有关联、错误处理方面最终选择Promise.allSettled，代码如下：

1. // 实现 对多个网站链接预检，判定网站链接是否有效
3. import { get } from 'https'
4. import { get as getHttp } from 'http'
5. import { URL } from 'url'
7. import { ATagSites } from '@/type'
9. export const detectSitesValid = (allSites: ATagSites[]) => {
10.   // 遍历 allSites 数组，获取所有网站的链接
11.   const sites: { name: string; url: string }[] = []
12.   allSites.forEach((aTagSites) => {
13.     aTagSites.sites.forEach((site) => {
14.       sites.push({
15.         name: site.name,
16.         url: site.link
17.       })
18.     })
19.   })
21.   // 存储所有网站的请求
22.   const fetchRequests: Promise<string>[] = []
23.   // 存储请求结果
24.   const fetchResults: string[] = []
26.   // 遍历所有网站，发起请求
27.   sites.forEach((site) => {
28.     const { name, url } = site
29.     const { protocol } = new URL(url)
30.     const request = protocol === 'https:' ? get : getHttp
31.     fetchRequests.push(
32.       new Promise((resolve, reject) => {
33.         request(
34.           {
35.             hostname: new URL(url).hostname,
36.             path: new URL(url).pathname,
37.             method: 'GET',
38.             timeout: 30000
39.           },
40.           (res) => {
41.             const { statusCode, statusMessage } = res
42.             fetchResults.push(`${name}, ${url}, ${statusCode || 200}, ${statusMessage || 'OK'}`)
43.             resolve('ok')
44.           }
45.         ).on('error', (err) => {
46.           const { message } = err
47.           fetchResults.push(`${name}, ${url}, ${0}, ${message}`)
48.           resolve('error')
49.         })
50.       })
51.     )
52.   })
54.   return Promise.allSettled(fetchRequests)
55. }

复制代码

参考

• Promise.all和promise.allSettled的用法，promise.all的错误捕获方法
  
• Promise 的实例方法和静态方法有哪些，如何手动实现？
  

来源:https://www.cnblogs.com/chenmijiang/p/17314754.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！