Отменить обычную цепочку обещаний ECMAScript 6

Есть ли способ очистить .then экземпляра JavaScript Promise?

Нет. По крайней мере, не в ECMAScript 6. Обещания (и их then обработчики) по умолчанию не могут быть отменены (к сожалению). На es-Discussion есть небольшое обсуждение (например, здесь) о том, как это сделать. правильным образом, но какой бы подход ни выиграл, он не попадет в ES6.

Текущая точка зрения заключается в том, что создание подклассов позволит создавать отменяемые обещания с использованием вашей собственной реализации (не уверен, насколько хорошо это будет работать).

Пока языковой комитет не определит лучший способ (надеюсь, ES7?), вы все еще можете использовать пользовательские реализации Promise, многие из которых имеют отмену.

Текущее обсуждение находится в https://github.com/domenic/cancelable-promise и https://github.com/bergus/promise-cancellation черновики.

Хотя в ES6 нет стандартного способа сделать это, для этого есть библиотека под названием Bluebird.

Существует также рекомендуемый способ, описанный в документации по реакции. Это похоже на то, что у вас было во 2-м и 3-м обновлениях.

const makeCancelable = (promise) => {
  let hasCanceled_ = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then((val) =>
      hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
    );
    promise.catch((error) =>
      hasCanceled_ ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled_ = true;
    },
  };
};

const cancelablePromise = makeCancelable(
  new Promise(r => component.setState({...}}))
);

cancelablePromise
  .promise
  .then(() => console.log('resolved'))
  .catch((reason) => console.log('isCanceled', reason.isCanceled));

cancelablePromise.cancel(); // Cancel the promise

Взято из: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Я действительно удивлен, что никто не упоминает Promise.race в качестве кандидата на это:

const actualPromise = new Promise((resolve, reject) => { setTimeout(resolve, 10000) });
let cancel;
const cancelPromise = new Promise((resolve, reject) => {
    cancel = reject.bind(null, { canceled: true })
})

const cancelablePromise = Object.assign(Promise.race([actualPromise, cancelPromise]), { cancel });

const makeCancelable = promise => {
    let rejectFn;

    const wrappedPromise = new Promise((resolve, reject) => {
        rejectFn = reject;

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

    wrappedPromise.cancel = () => {
        rejectFn({ canceled: true });
    };

    return wrappedPromise;
};

Использование:

const cancelablePromise = makeCancelable(myPromise);
// ...
cancelablePromise.cancel();

Обещание можно отменить с помощью AbortController.

Есть ли способ очистки: да, вы можете отклонить обещание с помощью объекта AbortController, и тогда promise обойдет все блоки then и перейдет непосредственно к блоку catch.

Пример:

import "abortcontroller-polyfill";

let controller = new window.AbortController();
let signal = controller.signal;
let elem = document.querySelector("#status")

let example = (signal) => {
    return new Promise((resolve, reject) => {
        let timeout = setTimeout(() => {
            elem.textContent = "Promise resolved";
            resolve("resolved")
        }, 2000);

        signal.addEventListener('abort', () => {
            elem.textContent = "Promise rejected";
            clearInterval(timeout);
            reject("Promise aborted")
        });
    });
}

function cancelPromise() {
    controller.abort()
    console.log(controller);
}

example(signal)
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log("Catch: ", error)
    });

document.getElementById('abort-btn').addEventListener('click', cancelPromise);

HTML

    <button type="button" id="abort-btn" onclick="abort()">Abort</button>
    <div id="status"> </div>

Примечание: необходимо добавить полифилл, поддерживается не всеми браузерами.

Живой пример

На самом деле невозможно остановить выполнение обещания, но вы можете перехватить отклонение и вызвать его из самого обещания.

class CancelablePromise {
  constructor(executor) {
    let _reject = null;
    const cancelablePromise = new Promise((resolve, reject) => {
      _reject = reject;
      return executor(resolve, reject);
    });
    cancelablePromise.cancel = _reject;

    return cancelablePromise;
  }
}

Использование:

const p = new CancelablePromise((resolve, reject) => {
  setTimeout(() => {
    console.log('resolved!');
    resolve();
  }, 2000);
})

p.catch(console.log);

setTimeout(() => {
  p.cancel(new Error('Messed up!'));
}, 1000);

Есть несколько библиотек npm для отменяемых обещаний.

1. p-cancelable https://github.com/sindresorhus/p-cancelable < / а>

2. cancelable-обещание https://github.com/alkemics/CancelablePromise

Вот наша реализация https://github.com/permettez-moi-de-construire/cancellable-promise

Используется как

const {
  cancellablePromise,
  CancelToken,
  CancelError
} = require('@permettezmoideconstruire/cancellable-promise')

const cancelToken = new CancelToken()

const initialPromise = SOMETHING_ASYNC()
const wrappedPromise = cancellablePromise(initialPromise, cancelToken)


// Somewhere, cancel the promise...
cancelToken.cancel()


//Then catch it
wrappedPromise
.then((res) => {
  //Actual, usual fulfill
})
.catch((err) => {
  if(err instanceOf CancelError) {
    //Handle cancel error
  }

  //Handle actual, usual error
})

который :

• Не трогает Promise API
• Сделаем дальнейшую отмену внутри catch звонка
• Положитесь на то, что отмена будет отклонена, а не решена, в отличие от любого другого предложения или реализации.

Тяги и комментарии приветствуются

простая версия:

просто выдайте функцию отклонения.

function Sleep(ms,cancel_holder) {

 return new Promise(function(resolve,reject){
  var done=false; 
  var t=setTimeout(function(){if(done)return;done=true;resolve();}, ms);
  cancel_holder.cancel=function(){if(done)return;done=true;if(t)clearTimeout(t);reject();} 
 })
}

упаковочный раствор (заводской)

решение, которое я нашел, - передать объект cancel_holder. у него будет функция отмены. если у него есть функция отмены, то его можно отменить.

Эта функция отмены отклоняет обещание с ошибкой («отменено»).

Перед разрешением, отклонением или on_cancel предотвращает беспричинный вызов функции отмены.

Я нашел удобным передать действие отмены путем инъекции

function cancelablePromise(cancel_holder,promise_fn,optional_external_cancel) {
  if(!cancel_holder)cancel_holder={};
  return new Promise( function(resolve,reject) {
    var canceled=false;
    var resolve2=function(){ if(canceled) return; canceled=true; delete cancel_holder.cancel; resolve.apply(this,arguments);}
    var reject2=function(){ if(canceled) return; canceled=true; delete cancel_holder.cancel; reject.apply(this,arguments);}
    var on_cancel={}
    cancel_holder.cancel=function(){
      if(canceled) return; canceled=true;

      delete cancel_holder.cancel;
      cancel_holder.canceled=true;

      if(on_cancel.cancel)on_cancel.cancel();
      if(optional_external_cancel)optional_external_cancel();

      reject(new Error('canceled'));
    };

    return promise_fn.call(this,resolve2,reject2,on_cancel);        
  });
}

function Sleep(ms,cancel_holder) {

 return cancelablePromise(cancel_holder,function(resolve,reject,oncacnel){

  var t=setTimeout(resolve, ms);
  oncacnel.cancel=function(){if(t)clearTimeout(t);}     

 })
}


let cancel_holder={};

// meanwhile in another place it can be canceled
setTimeout(function(){  if(cancel_holder.cancel)cancel_holder.cancel(); },500) 

Sleep(1000,cancel_holder).then(function() {
 console.log('sleept well');
}, function(e) {
 if(e.message!=='canceled') throw e;
 console.log('sleep interrupted')
})

Попробуйте прерывание обещания: https://www.npmjs.com/package/promise-abortable

$ npm install promise-abortable

import AbortablePromise from "promise-abortable";

const timeout = new AbortablePromise((resolve, reject, signal) => {
  setTimeout(reject, timeToLive, error);
  signal.onabort = resolve;
});

Promise.resolve(fn()).then(() => {
  timeout.abort();
});

Если ваш код помещен в класс, вы можете использовать для этого декоратор. Такой декоратор у вас есть в utils-decorators (npm install --save utils-decorators). Он отменит предыдущий вызов декорированного метода, если до разрешения предыдущего вызова был сделан еще один вызов для этого конкретного метода.

import {cancelPrevious} from 'utils-decorators';

class SomeService {

   @cancelPrevious()
   doSomeAsync(): Promise<any> {
    ....
   }
}

или вы можете использовать функцию-оболочку:

import {cancelPreviousify} from 'utils-decorators';

const cancelable = cancelPreviousify(originalMethod)

https://github.com/vlio20/utils-decorators#cancelprevious-method

Если вы хотите остановить выполнение всех событий и ловушек, вы можете сделать это, введя обещание, которое никогда не будет выполнено. Вероятно, это повторяет утечку памяти, но это решит проблему и не должно вызывать слишком много потраченной впустую памяти в большинстве приложений.

new Promise((resolve, reject) => {
    console.log('first chain link executed')
    resolve('daniel');
}).then(name => {
    console.log('second chain link executed')
    if (name === 'daniel') {
        // I don't want to continue the chain, return a new promise
        // that never calls its resolve function
        return new Promise((resolve, reject) => {
            console.log('unresolved promise executed')
        });
    }
}).then(() => console.log('last chain link executed'))

// VM492:2 first chain link executed
// VM492:5 second chain link executed
// VM492:8 unresolved promise executed

Установите свойство «отменено» в обещании, чтобы сигнализировать then() и catch() о досрочном выходе. Это очень эффективно, особенно для Web Workers, у которых существующие микрозадачи поставлены в очередь в Promises от onmessage обработчиков.

// Queue task to resolve Promise after the end of this script
const promise = new Promise(resolve => setTimeout(resolve))

promise.then(_ => {
  if (promise.canceled) {
    log('Promise cancelled.  Exiting early...');
    return;
  }

  log('No cancelation signaled.  Continue...');
})

promise.canceled = true;

function log(msg) {
  document.body.innerHTML = msg;
}

Ответ @Michael Yagudaev у меня работает.

Но исходный ответ не связывал обернутое обещание с .catch () для обработки обработки отклонения, вот мое улучшение поверх ответа @Michael Yagudaev:

const makeCancelablePromise = promise => {
  let hasCanceled = false;
  const wrappedPromise = new Promise((resolve, reject) => {
    promise
      .then(val => (hasCanceled ? reject({ isCanceled: true }) : resolve(val)))
      .catch(
        error => (hasCanceled ? reject({ isCanceled: true }) : reject(error))
      );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled = true;
    }
  };
};

// Example Usage:
const cancelablePromise = makeCancelable(
  new Promise((rs, rj) => {
    /*do something*/
  })
);
cancelablePromise.promise.then(() => console.log('resolved')).catch(err => {
  if (err.isCanceled) {
    console.log('Wrapped promise canceled');
    return;
  }
  console.log('Promise was not canceled but rejected due to errors: ', err);
});
cancelablePromise.cancel();

Если p - это переменная, содержащая обещание, тогда p.then(empty); следует отклонить обещание, когда оно в конечном итоге завершится или если оно уже завершено (да, я знаю, что это не исходный вопрос, но это мой вопрос). "пусто" равно function empty() {}. Я просто новичок и, вероятно, ошибаюсь, но эти другие ответы кажутся слишком сложными. Обещания должны быть простыми.

Я все еще работаю над этой идеей, но вот как я реализовал отменяемое обещание на примере setTimeout.

Идея состоит в том, что обещание разрешается или отклоняется всякий раз, когда вы решили, что это так, поэтому нужно решить, когда вы хотите отменить, удовлетворить критерию, а затем самостоятельно вызвать функцию reject().

• Во-первых, я думаю, что есть две причины для досрочного завершения обещания: чтобы завершить его (что я назвал решить) и отменить (что я назвал отклонить ). Конечно, это только мое ощущение. Конечно, есть метод Promise.resolve(), но он находится в самом конструкторе и возвращает фиктивное разрешенное обещание. Этот метод экземпляра resolve() фактически разрешает созданный экземпляр объекта обещания.

• Во-вторых, вы можете с радостью добавить к вновь созданному объекту обещания все, что захотите, прежде чем вернуть его, поэтому я только что добавил методы resolve() и reject(), чтобы сделать его самодостаточным.

• В-третьих, уловка состоит в том, чтобы иметь возможность позже получить доступ к функциям исполнителя resolve и reject, поэтому я просто сохранил их в простом объекте внутри замыкания.

function wait(delay) {
  var promise;
  var timeOut;
  var executor={};
  promise=new Promise(function(resolve,reject) {
    console.log(`Started`);
    executor={resolve,reject};  //  Store the resolve and reject methods
    timeOut=setTimeout(function(){
      console.log(`Timed Out`);
      resolve();
    },delay);
  });
  //  Implement your own resolve methods,
  //  then access the stored methods
      promise.reject=function() {
        console.log(`Cancelled`);
        clearTimeout(timeOut);
        executor.reject();
      };
      promise.resolve=function() {
        console.log(`Finished`);
        clearTimeout(timeOut);
        executor.resolve();
      };
  return promise;
}

var promise;
document.querySelector('button#start').onclick=()=>{
  promise=wait(5000);
  promise
  .then(()=>console.log('I have finished'))
  .catch(()=>console.log('or not'));
};
document.querySelector('button#cancel').onclick=()=>{ promise.reject(); }
document.querySelector('button#finish').onclick=()=>{ promise.resolve(); }

<button id="start">Start</button>
<button id="cancel">Cancel</button>
<button id="finish">Finish</button>