查看原文
其他

Promise:为什么没有取消?

前端大全
2024-08-23

作者:德玛西亚大宝剑之力

https://juejin.cn/post/7373986431850872869

在JavaScript中,Promise是用于处理异步操作的对象,它代表一个异步操作的最终完成(或失败)及其结果值。然而,JavaScript的Promise并不提供内置的取消(cancel)机制。

Promise是经过了深思熟虑,才不自带取消功能的!!!

这篇文章,将围绕着设计的哲学,以及从状态机的角度,解释为什么不需要cancel

即使如此,文章最后部分,还是会提供一些方法,来实现一下cancle

设计的哲学

设计理念

  • Promise的设计初衷是为了简化回调函数的使用,使得处理异步操作的代码更加简洁和可读。其设计重点在于处理异步操作的成功和失败,而不是控制操作的生命周期
  • 取消机制会引入复杂性,尤其是对于依赖于多个Promise的情况,例如Promise.allPromise.race。如果某个Promise被取消,其影响可能会传递给其他依赖于它的Promise,导致意外的行为和难以调试的问题。

资源管理

  • 异步操作通常涉及到外部资源,如网络请求、定时器等。Promise取消机制需要能够正确管理和释放这些资源。实现一个通用且可靠的资源管理机制非常复杂,并且可能因不同的资源类型而异。

取消语义不明确

  • 如果一个Promise可以被取消,那么需要明确如何处理其已完成的状态。特别是,处理已经部分完成或即将完成的操作,可能会导致不一致的状态。

状态机:简单就是美

Promise的状态机

在输入一个状态时,只得到一个固定的状态。

一个Promise可以被看作是一个简单的状态机,它有以下几种状态:

  1. Pending(进行中) :初始状态,表示异步操作尚未完成。
  2. Fulfilled(已完成) :表示异步操作成功完成,并返回了一个值。
  3. Rejected(已拒绝) :表示异步操作失败,并返回了一个原因(错误)。

状态转换规则如下:

  • Pending状态可以转换到Fulfilled状态。
  • Pending状态可以转换到Rejected状态。
  • 一旦转换到FulfilledRejected状态,Promise的状态就不可再改变。

取消功能的复杂性

引入取消功能意味着需要增加一个新的状态——“Cancelled(已取消)”。这会使状态机的设计变得更加复杂,因为需要考虑更多的状态转换和边界情况

如果我们引入“Cancelled”状态,状态机的状态和转换规则将变成:

  1. Pending(进行中)

    • 可以转换到Fulfilled
    • 可以转换到Rejected
    • 可以转换到Cancelled
  1. Fulfilled(已完成) :状态不可变。
  2. Rejected(已拒绝) :状态不可变。
  3. Cancelled(已取消) :状态不可变。

这种增加的复杂性会导致以下问题:

  • 状态转换冲突:需要明确地处理在Pending状态下多次转换的情况。例如,如果一个PromisePending状态下同时尝试转换到FulfilledCancelled,应该优先处理哪一个?
  • 副作用处理:许多异步操作(如网络请求、文件读写等)具有副作用。取消这些操作需要确保所有相关的资源都被正确地清理,这不仅增加了实现的复杂性,还可能导致不一致的状态。
  • 链式操作Promise通常被链式调用( .then().catch() )。如果一个中间的Promise被取消,如何处理后续链式操作也是一个难题。例如,Promise.allPromise.race的行为如何改变?

如何实现取消功能

尽管标准的Promise没有内置的取消功能,可以通过一些方法来实现类似的功能。例如,使用AbortController来取消网络请求,或者使用自定义的Promise包装器来支持取消。

使用AbortController

对于Fetch API,可以使用AbortController来取消请求:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://www.baidu.com', { signal })
  .then(response => response)
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

// 取消请求
controller.abort();

自定义Promise包装器

也可以创建一个支持取消的自定义Promise包装器:

class CancellablePromise {
  constructor(executor) {
    this._hasCanceled = false;
    
    this._promise = new Promise((resolve, reject) => {
      executor(
        value => this._hasCanceled ? reject({ canceledtrue }) : resolve(value),
        reason => this._hasCanceled ? reject({ canceledtrue }) : reject(reason)
      );
    });
  }
  
  cancel() {
    this._hasCanceled = true;
  }

  then(onFulfilled, onRejected) {
    return this._promise.then(onFulfilled, onRejected);
  }

  catch(onRejected) {
    return this._promise.catch(onRejected);
  }
}

// 使用自定义的CancellablePromise
const cancellablePromise = new CancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('Completed!'), 1000);
});

cancellablePromise.then(
  result => console.log(result),
  err => {
    if (err.canceled) {
      console.log('Promise was canceled');
    } else {
      console.error('Promise error:', err);
    }
  }
);

// 取消Promise
cancellablePromise.cancel();

虽然标准的Promise没有内置取消功能,但可以通过这些方法来实现取消逻辑,根据实际需求选择合适的方案。

结语

虽然JavaScript的Promise没有内置取消功能,但这并不意味着我们无法实现取消功能。通过理解Promise的设计哲学和状态机模型,我们可以更好地掌握其使用方法,并通过巧妙的编程技巧实现我们需要的功能


推荐阅读  点击标题可跳转

1、一种适合 H5 屏幕适配方案

2、前端如何体系化性能优化?

3、前端最新趋势:JS 正在向服务器端转移、开发者最爱 Vue 技术栈、Bun 越来越受关注

继续滑动看下一个
前端大全
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存