1. Python技术站首页
  2. 其他
  3. JavaScript

记录 Promise 的方法

• JavaScript
yizhihongxing

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

Promise 方法

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

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

  1. then的第二个参数只能处理当前的promise，而catch方法可以处理任意位置的rejected状态。所以，如果多个then方法链式调用中有多个rejected状态，可以在最后使用一个catch方法来处理。

  2. then的第二个参数和catch方法的返回值不同。then的第二个参数返回的是一个新的promise对象，而catch方法返回的是一个值或一个新的promise对象。如果返回的是一个值，则会被自动包装成一个resolved状态的promise。

  3. 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值。

;(async () => {
  const promise1 = Promise.resolve('Hello')
  const promise2 = 42
  // const promise2 = Promise.reject('Error')
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'Goodbye')
  })
  // const promise4 = Promise.reject('Error2')

  try {
    const result = await Promise.all([promise1, promise2, promise3])
    // 成功输出：[ 'Hello', 42, 'Goodbye' ]
    console.log(result)
  } catch (e) {
    // 失败输出：Error
    console.log(e)
  }
})()

Promise.allSettled

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

;(async () => {
  const promise1 = Promise.resolve('Hello')
  const promise2 = 42
  // const promise2 = Promise.reject('Error')
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'Goodbye')
  })
  // const promise4 = Promise.reject('Error2')

  try {
    const result = await Promise.allSettled([promise1, promise2, promise3])
    // 成功输出：
    // [
    //   { status: 'fulfilled', value: 'Hello' },
    //   { status: 'fulfilled', value: 42 },
    //   { status: 'fulfilled', value: 'Goodbye' }
    // ]
    console.log(result)
    // 失败输出：
    // [
    //   { status: 'fulfilled', value: 'Hello' },
    //   { status: 'rejected', reason: 'Error' },
    //   { status: 'fulfilled', value: 'Goodbye' }
    // ]
  } catch(e) {
    // 不会执行
      console.log('error:', e)
  }

  Promise.allSettled([promise1, promise2, promise3]).then((result) => {
    // 成功输出：
    // [
    //   { status: 'fulfilled', value: 'Hello' },
    //   { status: 'fulfilled', value: 42 },
    //   { status: 'fulfilled', value: 'Goodbye' }
    // ]
    console.log(result)
    // 失败输出：
    // [
    //   { status: 'fulfilled', value: 'Hello' },
    //   { status: 'rejected', reason: 'Error' },
    //   { status: 'fulfilled', value: 'Goodbye' }
    // ]
  })
})()

Promise.all和Promise.allSettled的区别：

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

Promise.any

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

const promise1 = Promise.reject("error1")
const promise2 = Promise.reject("error2")
const promise3 = Promise.resolve("success")
// const promise3 = Promise.reject("error3")

Promise.any([promise1, promise2, promise3]).then((value) => {
  // 成功输出：success
  console.log(value)
}).catch((error) => {
  // 失败输出：
  // [AggregateError: All promises were rejected] {
  //   [errors]: [ 'error1', 'error2', 'error3' ]
  // }
  console.log(error)
})

Promise.race

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

const promise1 = Promise.reject("error1")
const promise2 = Promise.reject("error2")
const promise3 = Promise.resolve("success")
// const promise3 = Promise.reject("error3")

Promise.race([promise1, promise2, promise3]).then((value) => {
  // 成功输出：error1
  console.log(value)
}).catch((error) => {
  // 失败输出：error1
  console.log(error)
})

Promise.race和Promise.any的区别：

  1. Promise.race会在其中任意一个Promise对象状态改变（即fulfilled或rejected）时立即返回结果，而Promise.any只会在其中任意一个Promise对象fulfilled时返回结果。

  2. 当所有Promise对象都被rejected时，Promise.race会返回被rejected的Promise对象的结果，而Promise.any会抛出AggregateError异常。

  3. 如果Promise.race传入的参数是空数组，它会一直处于pending状态，而Promise.any会立即抛出AggregateError异常。（另外：Promise.all和Promise.allSettled返回fulfilled状态）

使用Promise实现站点预检

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

// 实现 对多个网站链接预检，判定网站链接是否有效

import { get } from 'https'
import { get as getHttp } from 'http'
import { URL } from 'url'

import { ATagSites } from '@/type'

export const detectSitesValid = (allSites: ATagSites[]) => {
  // 遍历 allSites 数组，获取所有网站的链接
  const sites: { name: string; url: string }[] = []
  allSites.forEach((aTagSites) => {
    aTagSites.sites.forEach((site) => {
      sites.push({
        name: site.name,
        url: site.link
      })
    })
  })

  // 存储所有网站的请求
  const fetchRequests: Promise<string>[] = []
  // 存储请求结果
  const fetchResults: string[] = []

  // 遍历所有网站，发起请求
  sites.forEach((site) => {
    const { name, url } = site
    const { protocol } = new URL(url)
    const request = protocol === 'https:' ? get : getHttp
    fetchRequests.push(
      new Promise((resolve, reject) => {
        request(
          {
            hostname: new URL(url).hostname,
            path: new URL(url).pathname,
            method: 'GET',
            timeout: 30000
          },
          (res) => {
            const { statusCode, statusMessage } = res
            fetchResults.push(`${name}, ${url}, ${statusCode || 200}, ${statusMessage || 'OK'}`)
            resolve('ok')
          }
        ).on('error', (err) => {
          const { message } = err
          fetchResults.push(`${name}, ${url}, ${0}, ${message}`)
          resolve('error')
        })
      })
    )
  })

  return Promise.allSettled(fetchRequests)
}

参考

原文链接：https://www.cnblogs.com/chenmijiang/p/17314754.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：记录 Promise 的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • javascript学习随笔(编写浏览器脚本 Navigator Scripting )

    JavaScript学习随笔（编写浏览器脚本 Navigator Scripting） 概述 Navigator对象在JavaScript中提供了许多有用的属性和方法，可以用于检测和操作浏览器。 在编写浏览器脚本时，Navigator对象的知识非常重要。 Navigator对象中的属性和方法 Navigator对象的属性 navigator.appCodeN…

    JavaScript 2023年5月27日
    00

  • JavaScript利用fetch实现异步请求的方法实例

    下面是针对“JavaScript利用fetch实现异步请求的方法实例”的完整攻略： 什么是fetch？ fetch是浏览器原生的一种实现网络请求的API，主要用于替代传统的XMLHttpRequest（XHR）对象，它使用Promise对请求进行异步处理，更加方便和易用。 fetch的基本使用 fetch API 接收一个URL参数，其返回一个Promise…

    JavaScript 2023年5月28日
    00

  • javaScript 判断字符串是否为数字的简单方法

    判断一个字符串是否为数字，可以使用多种方法，下面是两种常用的方法。 方法一：使用正则表达式 使用正则表达式可以判断一个字符串是否为数字，通过使用 test() 函数匹配字符串，检测该字符串是否符合数字格式。 if (/^[0-9]+$/.test(str)) { console.log(‘该字符串为数字’); } else { console.log(‘该字…

    JavaScript 2023年5月28日
    00

  • Next.js应用转换为TypeScript方法demo

    下面是关于将Next.js应用转换为TypeScript的完整攻略： 1. 安装TypeScript依赖 在项目根目录下，使用以下命令安装TypeScript依赖： npm install –save-dev typescript @types/react @types/node 这个命令会安装三个依赖包，其中： typescript：TypeScript…

    JavaScript 2023年6月11日
    00

  • 通过js示例讲解时间复杂度与空间复杂度

    下面我将详细讲解“通过JS示例讲解时间复杂度和空间复杂度”的攻略。 什么是时间复杂度和空间复杂度 时间复杂度和空间复杂度都是算法评估的重要指标，分别表示了算法执行时间和所需内存空间的量度。 时间复杂度：指执行算法所需时间的数量级，常用大O表示法来表示。例如，O(1)表示执行时间常量，O(n)表示执行时间与数据规模成线性比例，O(n^2)表示有执行时间与数据规…

    JavaScript 2023年5月28日
    00

  • Javascript Date setMilliseconds() 方法

    JavaScript 中的 setMilliseconds() 方法用于设置日期对象的毫秒部分。在本教程中，我们将详细介绍 setMilliseconds() 方法的使用方法。 setMilliseconds() 方法基本语法如下： date.setMilliseconds(msValue) 其中，msValue 是设置的毫秒值，必须是一个介于 0 到 99…

    JavaScript 2023年5月11日
    00

  • nodejs将JSON字符串转化为JSON对象报错的解决

    当我们在Node.js中将JSON字符串转换成JSON对象时，有时候会遇到以下报错信息：SyntaxError: Unexpected Token 或 JSON.parse: unexpected character。这些错误信息一般是由于JSON字符串格式错误或编码格式错误导致。下面，我们就来详细讲解Node.js将JSON字符串转化为JSON对象报错的解…

    JavaScript 2023年5月27日
    00

  • JavaScript将一个数组插入到另一个数组的方法

    将一个数组插入到另一个数组可以通过以下两种方法实现： 方法一：使用spread operator（展开操作符） 展开操作符可以将一个数组展开成其包含的所有元素，然后将这些元素插入到另一个数组中。下面是这种方法的示例代码： const arr1 = [1, 2, 3]; const arr2 = […arr1, 4, 5, 6]; console.log(…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部