在有或没有 jquery 的情况下使用延迟角度承诺的正确方法是什么？

Question

没有角度或打字稿，我有以下代码：

let queue = [
    function () { 
      let waitingTime = 0 ;
      setTimeout(function () { console.log("a - " + Date.now()); }, waitingTime); },
    function () { 
      let waitingTime = 2500 ;
      setTimeout(function () { console.log("b - " + Date.now()); }, waitingTime); },
    function () { 
      let waitingTime = 5000 ;
      setTimeout(function () { console.log("c - " + Date.now()); }, waitingTime); }
];

function SerialCall(queue) {
    var d = $.Deferred().resolve();
    while (queue.length > 0) {
        d = d.then(queue.shift()); // you don't need the `.done`
    }
}

SerialCall(queue);

我想在 angular8 中复制它，并在组件内部打字。 我试过 npm 安装 jquery 和 npm i @types/jquery。 我在“d = d”行中看到以下错误：

(local var) d: JQuery.Deferred<any, any, any>
Type 'PromiseBase<never, never, never, never, never, never, never, never, never, never, never, never>' is missing the following properties from type 'Deferred<any, any, any>': notify, notifyWith, reject, rejectWith, and 2 more.ts(2740)

做我想做的事情的正确方法是什么？ （执行队列中的第一个函数，完成后执行第二个，然后执行第三个）。 如果有一个更优雅的 angular only/javascript 方式，则不必使用 jquery，如果有另一个众所周知的标准库并且适用于我正在尝试做的事情，那么这是一个可以接受的答案。

Answer 1

您的示例可以使用concat函数使用 observable 来完成。

const queue = [
   defer(() => of(new Date()).pipe(delay(0)),
   defer(() => of(new Date()).pipe(delay(2500)),
   defer(() => of(new Date()).pipe(delay(5000))
];

concat(...queue).subscribe(console.log);

concat 函数按照它们完成的顺序从 observable 发出值。

Observables 是 Angular 中 Promise 的首选替代品，你基本上可以做你以前用 Promises 做的所有事情，以及更多。

Promise 是基于拉取的值被解析。 Observable 是基于推送的值的发射位置。 后者允许声明式编程，您可以在其中描述如何修改数据流。

一些关于 observables 的教程：

https://www.javascripttuts.com/introduction-to-angular-2-observables/ https://blog.logrocket.com/understanding-rxjs-observables/ https://medium.com/@kevinwkds/angular-observable -81eea33a1aab

Answer 2

如果您正在寻找使用 Promises 的方法（如标题所示），那么您可以执行以下操作：

// Let's stick to your original functions array
const queue = [
    function () { 
      let waitingTime = 0 ;
      setTimeout(function () { console.log("a - " + Date.now()); }, waitingTime); },
    function () { 
      let waitingTime = 2500 ;
      setTimeout(function () { console.log("b - " + Date.now()); }, waitingTime); },
    function () { 
      let waitingTime = 5000 ;
      setTimeout(function () { console.log("c - " + Date.now()); }, waitingTime); }
];


// you'll need this for the .reduce call
const starterPromise = Promise.resolve(null);

  // Our Async wrapper
  function asyncRunner(fn) {
    return (new Promise(resolve => { resolve(fn()) }));
  }

// and finally the reducer
await queue.reduce(
    (p, fn) => p.then(() => asyncRunner(fn)),
    starterPromise
);