承诺失去自定义功能答案

【问题标题】：Promise lose custom function承诺失去自定义功能
【发布时间】：2021-09-20 04:38:58
【问题描述】：

这是一个代码示例：

var promise = new Promise((resolve, reject) => {
  resolve("resolved");
});


promise.abort = function () {
  console.log("abort!");
};

console.log(promise.abort());

function bar() {
  return promise.then((value) => {
    return value + "!";
  });
}

newPromise = bar();
newPromise.then(value => {
  console.log(value);
})


console.log(newPromise.abort());

我在一个 promise 中添加了一个自定义函数。调用函数abort() 按预期工作。在函数bar() 中，我使用then() 方法注销解析的值。我知道bar() 的返回值是一个新的承诺。但它失去了自定义函数abort()。

如何将自定义函数继承到新的 Promise 中？

【问题讨论】：

一个promise不应该有一个方法来中止它。把它放在一个单独的地方，然后直接调用那个函数——不是在 promise 上，也绝对不是在后代 promise 上。你希望promise.then(_ => timeout(500)).abort() 做什么？

标签： javascript promise cancellation

【解决方案1】：

创建您自己的课程和subclass the native Promise。然后您可以保留自定义方法，因为.then() 将返回自定义类

class MyPromise extends Promise {
  abort() {
    console.log("abort!");
  }
}

var promise = new MyPromise((resolve, reject) => {
  resolve("resolved");
});

console.log(promise.abort());

function bar() {
  return promise.then((value) => {
    console.log(value);
  });
}

newPromise = bar();

console.log(newPromise.abort());

【讨论】：

有没有extend的老式方式？
“老式方式”可能是从头开始实现您自己的承诺，而不是简单地扩展现有的承诺。有关指针，请参阅 How is a promise/defer library implemented?、Concept - Distilling how a promise works? 和 Basic Javascript promise implementation attempt。但我不会推荐它。使用extend 是向内置函数添加行为的正确方法。
@JuKe 如果没有 ES6 class 语法，就不可能（正确地）子类化（ES6）像 Promise 这样的内置函数

【解决方案2】：

You cannot cancel/abort a Promise。一种方法是编写一个通用的 timeout 或类似的函数来处理长期承受的 Promise -

function sleep(ms) {
  return new Promise(r => setTimeout(r, ms))
}

function timeout(p, ms) {
  const orFail = sleep(ms).then(_ => { throw Error("timeout") })
  return Promise.race([ p, orFail ])
}

async function testTask(value) {
  await sleep(3000)
  return value
}

timeout(testTask("hello"), 5000)
  .then(console.log, console.error) // "hello"
  
timeout(testTask("world"), 1000)
  .then(console.log, console.error) // Error "timeout"

另一种方法是使用支持取消的第三方库，如 bluebird -

import { Promise } from "bluebird"

function makeCancellableRequest(url) {
    return new Promise(function(resolve, reject, onCancel) {
        var xhr = new XMLHttpRequest();
        xhr.on("load", resolve);
        xhr.on("error", reject);
        xhr.open("GET", url, true);
        xhr.send(null);
        // Note the onCancel argument only exists if cancellation has been enabled!
        onCancel(function() {
            xhr.abort();
        });
    });
}

【讨论】：