Chilfish's avatar

Chilfish

Promise 再揭

Chilfish
1112个字
blog

虽然用了很久的 Promise 来处理异步事件，但一直都没系统地整理它们的一些用法 😅

经典的异步与事件循环

JavaScript 对于异步事件的处理是通过事件循环来实现的，核心概念是事件队列 (Event Queue) 和执行栈 (Call Stack)。执行栈用于存储代码的执行顺序，而事件队列则存储异步操作的回调函数。当执行栈为空时，事件循环会从事件队列中取出一个回调函数，放入执行栈中执行

事件循环遵循以下几个步骤，这个过程会不断循环，直到事件队列和调用栈都为空。

  • 执行同步任务：首先执行当前调用栈中的所有同步任务，直到调用栈为空。
  • 处理异步任务：当遇到异步任务时，将其放入事件队列中，等待执行。
  • 等待：等待调用栈为空。
  • 执行回调：当调用栈为空时，事件循环会从事件队列中取出一个回调函数，放入调用栈中执行。

在 JavaScript 中，常见的异步操作包括定时器 (setTimeout，setInterval)、Promise、事件监听器等。这些异步操作会在事件循环中被处理，确保它们能够按照正确的顺序执行。

虽然支持传入 Promise 数组来运行，但实际上因为默认下 js 是单线程的，这些 Promise 只是在不断地切换的并发运行，而不是真正的并行运行。得切到 worker 里才能真正多线程运行

API 用法

new Promise 实例

通常我们要等一个回调函数里的值，并在该函数外面使用，例如等待 img.onload 之后的操作，这时就需要用 promise 来包装它

function loadImage(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = url
  })
}


// to use
const img = await loadImage('https://example.com/image.jpg')
conoole.log(img.width)

这样就可以在外面使用 img 了，而不是通过传一个回调函数的参数来使用。这种做法就叫做 promisify，可以写成一个通用的函数：

function promisify<T = any>(fn: Function): (...args: any[]) => Promise<T> {
  return (...args: any[]) => {
    return new Promise((resolve, reject) => {
      fn(...args, (err: any, data: T) => {
        if (err)
          reject(err)
        else
          resolve(data)
      })
    })
  }
}

Promise.all

Promise.all 接收一个 promise 数组，返回一个新的 promise 数组，按传入的排序，但完成时机与顺序无关

只有当所有的 promise 都 resolve 时，新的 promise 才会 resolve；任意一个 promise reject 时，新的 promise 就会 reject。最终 resolve 的时机为数组里最久完成的那个，reject 的时机为数组里最先 reject 的那个

通常用在多个异步操作都完成后再执行某个操作的场景

Promise.allSettled

Promise.allSettled 与 Promise.all 类似，但不会因为某个 promise reject 而 reject，而是会等待所有的 promise 都 settle (resolve 或 reject) 后才 resolve

reject 的结果将呈现在 then 的结果中，而不会被 catch 捕获，类型如下：

type ThenDataInfo = {
  status: 'fulfilled'
  value: unknow
} | {
  status: 'rejected'
  reason: Error
}

Promise.any 和 Promise.race

any 是指任意一个 promise resolve 时，新的 promise 就会 resolve；只有当所有的 promise 都 reject 时，新的 promise 才会 reject

而 race 则是指任意一个 promise settle 时，新的 promise 就会 settle，不管是 resolve 还是 reject

then 里它只会返回第一个 resolve 的 promise 的结果，而不会返回一个数组

场景应用

超时拒绝 Promise

这就看传入的 promise 与 setTimeout 相比谁先完成了

export function timeoutPromise<T>(
  promise: Promise<T>,
  timeout: number,
  message?: string,
) {
  return Promise.race([
    promise,
    new Promise<T>((resolve, reject) => {
      setTimeout(() => {
        reject(new Error(message || 'timeout'))
      }, timeout)
    }),
  ])
}

错误重试

经典的 fetch 失败重试

export function retryPromise<T>(
  promise: () => Promise<T>,
  retryCount = 5,
  interval = 1000,
) {
  return new Promise<T>((resolve, reject) => {
    let count = 0
    const run = () => {
      promise()
        .then(resolve)
        .catch((error) => {
          if (count < retryCount) {
            count += 1
            setTimeout(run, interval)
          }
          else {
            reject(error)
          }
        })
    }
    run()
  })
}

可中断的

其实 fetch 本身可以将 signal 作为第二个参数传入，来实现中断

export function interruptablePromise<T>(
  promise: Promise<T>,
  abortSignal: AbortSignal,
) {
  return new Promise<T>((resolve, reject) => {
    abortSignal.addEventListener('abort', () => {
      reject(new Error('abort'))
    })


    promise
      .then(resolve)
      .catch(reject)
  })
}


// 使用
const abortController = new AbortController()
const promise = interruptablePromise(fetch('https://example.com'), abortController.signal)


// 手动中断
abortController.abort()

串行执行

这个场景下，我们需要等待上一个 promise 完成后再执行下一个 promise

export function serialPromise<T>(
  promises: (() => Promise<T>)[],
) {
  return promises.reduce(
    (prev, next) => prev.then(next),
    Promise.resolve(),
  )
}


// 使用
const promises = [
  () => fetch('https://example.com/1'),
  () => fetch('https://example.com/2'),
  () => fetch('https://example.com/3'),
]


await serialPromise(promises)
#ts#promise