前端分享-Promise可以中途取消啦（promise如何中断）

liuian 2025-05-02 11:52 54 浏览

传统 Promise 就像一台需要手动组装的设备，每次使用都要重新接线。而 Promise.withResolvers 的出现，相当于给开发者发了一个智能遥控器，可以随时随地控制异步操作。

它解决了三大痛点：

告别变量泄露：不再需要外部变量保存 resolve/reject
代码更聚焦：将创建 Promise 和逻辑控制解耦
灵活度翻倍：支持跨模块、跨函数控制异步状态

1. 与传统写法的直观对比

传统方式：

let manualResolve;  // 需要外部变量
const oldPromise = new Promise((resolve) => {
  manualResolve = resolve 
})

新写法：

const { promise, resolve } = Promise.withResolvers()
// 随时在任意位置调用 resolve()

相当于浏览器内置了变量保存机制

2. 底层实现揭秘

function withResolvers() {
  let resolve, reject
  const promise = new Promise((res, rej) => {
    resolve = res
    reject = rej
  })
  return { promise, resolve, reject }
}

但原生实现避免了作用域污染问题

3. 三大核心特性

即用即取：解构后直接使用 resolve/reject
跨域控制：可在不同函数间传递控制器
零副作用：不会影响其他 Promise 实例

实战场景解析

1. 事件监听器改造（比传统简洁50%）

// 传统方式需要嵌套在Promise构造函数中
function waitForClick(element) {
  const { promise, resolve } = Promise.withResolvers()
  element.addEventListener('click', resolve, { once: true })
  return promise
}

// 使用案例
const button = document.querySelector('#submit')
const clickPromise = waitForClick(button)
clickPromise.then(() => console.log('按钮被点击！'))

2. 可取消的异步操作

function cancellableFetch(url) {
  const { promise, resolve, reject } = Promise.withResolvers()
  const controller = new AbortController()

  fetch(url, { signal: controller.signal })
    .then(resolve)
    .catch(reject)

  return {
    promise,
    cancel: () => {
      controller.abort()
      reject('用户取消请求')
    }
  }
}

// 使用示例
const { promise, cancel } = cancellableFetch('https://api.example.com')
setTimeout(cancel, 5000) // 5秒后自动取消

3. 多步骤异步队列

class AsyncQueue {
  constructor() {
    this.queue = []
    this.current = Promise.withResolvers()
  }

  add(task) {
    this.queue.push(task)
    if(this.queue.length === 1) this.runNext()
  }

  runNext() {
    if(!this.queue.length) return
    
    const task = this.queue.shift()
    task().then(result => {
      this.current.resolve(result)
      this.current = Promise.withResolvers()
      this.runNext()
    })
  }
}

4. 跨组件通信桥梁

// 父组件
const modalController = Promise.withResolvers()
<Modal :promise="modalController.promise" />

// 子组件
props: ['promise'],
methods: {
  confirm() {
    this.promise.resolve('用户确认')
  }
}

四、避坑指南与最佳实践

不要滥用场景：简单异步仍推荐 async/await
错误处理必做：未捕获的 reject 会导致全局错误
内存泄漏预防：及时解除无用的事件监听

五、高频面试题精选

与传统写法的核心区别是什么？
答：解决变量作用域泄露问题，提供标准化控制接口
如何实现请求重试机制？

function retry(fn, times) {
  const attempt = (n) => {
    const { promise, resolve, reject } = Promise.withResolvers()
    fn().then(resolve).catch(err => {
      n > 0 ? attempt(n-1) : reject(err)
    })
    return promise
  }
  return attempt(times)
}