组合两个承诺

Question

我对JavaScript和promises真的很陌生，老实说，我不完全了解promises是如何工作的，所以我需要一些帮助。

我正在使用Google Cloud Messaging将通知从我的网站推送到我的用户。当用户收到通知并点击它时，它会打开一个存储在IndexedDB中的网址。

importScripts('IndexDBWrapper.js');
var KEY_VALUE_STORE_NAME = 'key-value-store', idb;

function getIdb() {
  if (!idb) {
    idb = new IndexDBWrapper(KEY_VALUE_STORE_NAME, 1, function (db) {
      db.createObjectStore(KEY_VALUE_STORE_NAME);
    });
  }
  return idb;
}

self.addEventListener('notificationclick', function (event) {
  console.log('On notification click: ', event);
  event.notification.close();
  event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME, event.notification.tag).then(function (url) {
    var redirectUrl = '/';
    if (url) redirectUrl = url;
      return clients.openWindow(redirectUrl);
  }));
});

所以在上面的代码中，我知道getIdb()...then()是一个承诺，但是event.waitUntil也是一个承诺吗？

上面代码的问题是，每次点击通知时，它都会打开一个Chrome实例，我更希望它能利用现有的实例。以下代码就是这样做的：

self.addEventListener('notificationclick', function(event) {  
  console.log('On notification click: ', event.notification.tag);  
  event.notification.close();
  event.waitUntil(
    clients.matchAll({  
      type: "window"  
    })
    .then(function(clientList) {  
      for (var i = 0; i < clientList.length; i++) {  
        var client = clientList[i];  
        if (client.url == '/' && 'focus' in client)  
          return client.focus();  
      }  
      if (clients.openWindow) {
        return clients.openWindow('/');  
      }
    })
  );
});

然而，现在我有两个承诺，getIdb和clients.matchAll，我真的不知道如何将这两个承诺和两组代码结合起来。任何帮助都将不胜感激。谢谢!

作为参考，这里是IndexDBWrapper.js：

'use strict';

function promisifyRequest(obj) {
  return new Promise(function(resolve, reject) {
    function onsuccess(event) {
      resolve(obj.result);
      unlisten();
    }
    function onerror(event) {
      reject(obj.error);
      unlisten();
    }
    function unlisten() {
      obj.removeEventListener('complete', onsuccess);
      obj.removeEventListener('success', onsuccess);
      obj.removeEventListener('error', onerror);
      obj.removeEventListener('abort', onerror);
    }
    obj.addEventListener('complete', onsuccess);
    obj.addEventListener('success', onsuccess);
    obj.addEventListener('error', onerror);
    obj.addEventListener('abort', onerror);
  });
}

function IndexDBWrapper(name, version, upgradeCallback) {
  var request = indexedDB.open(name, version);
  this.ready = promisifyRequest(request);
  request.onupgradeneeded = function(event) {
    upgradeCallback(request.result, event.oldVersion);
  };
}

IndexDBWrapper.supported = 'indexedDB' in self;

var IndexDBWrapperProto = IndexDBWrapper.prototype;

IndexDBWrapperProto.transaction = function(stores, modeOrCallback, callback) {
  return this.ready.then(function(db) {
    var mode = 'readonly';

    if (modeOrCallback.apply) {
      callback = modeOrCallback;
    }
    else if (modeOrCallback) {
      mode = modeOrCallback;
    }

    var tx = db.transaction(stores, mode);
    var val = callback(tx, db);
    var promise = promisifyRequest(tx);
    var readPromise;

    if (!val) {
      return promise;
    }

    if (val[0] && 'result' in val[0]) {
      readPromise = Promise.all(val.map(promisifyRequest));
    }
    else {
      readPromise = promisifyRequest(val);
    }

    return promise.then(function() {
      return readPromise;
    });
  });
};

IndexDBWrapperProto.get = function(store, key) {
  return this.transaction(store, function(tx) {
    return tx.objectStore(store).get(key);
  });
};

IndexDBWrapperProto.put = function(store, key, value) {
  return this.transaction(store, 'readwrite', function(tx) {
    tx.objectStore(store).put(value, key);
  });
};

IndexDBWrapperProto.delete = function(store, key) {
  return this.transaction(store, 'readwrite', function(tx) {
    tx.objectStore(store).delete(key);
  });
};

Answer 1

event.waitUntil()接受一个承诺--这允许浏览器让你的worker保持存活，直到你完成了你想做的事情(比如，直到你给event.waitUntil()的承诺得到解决)。

正如另一个答案所建议的，您可以在event.waitUntil中使用Promise.all()。Promise.all()接受一个promise数组并返回一个promise，因此您可以对其调用then。当您提供给Promise.all的所有promise都已解析时，您的处理函数将获得promise结果数组。然后你的代码看起来会像这样(我还没有实际测试过，但它应该很接近)：

self.addEventListener('notificationclick', function (event) {
  event.notification.close();
  event.waitUntil(Promise.all([
      getIdb().get(KEY_VALUE_STORE_NAME, event.notification.tag),
      clients.matchAll({ type: "window" })
    ]).then(function (resultArray) {
    var url = resultArray[0] || "/";
    var clientList = resultArray[1];
    for (var i = 0; i < clientList.length; i++) {
      var client = clientList[i];
      if (client.url == '/' && 'focus' in client)
        return client.focus();
    }
    if (clients.openWindow) {
      return clients.openWindow(url);
    }
  }));
});

Answer 2

处理多个承诺的一种方法是使用Promise.all

Promise.all([promise0, promise1, promise2]).then(function(valArray) {
    // valArray[0] is result of promise0
    // valArray[1] is result of promise1
    // valArray[2] is result of promise2
});

阅读有关promise.all - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all的信息

Answer 3

虽然我来晚了，但是，

我认为你可以使用这个轻量级的JS库，它可以为你做一些事情。https://www.npmjs.com/package/easy-promise-all

下面是它的小代码示例。

var { EasyPromiseAll } = require('easy-promise-all');

EasyPromiseAll({
    resultFromPromise1: Promise.resolve('first'),
    resultFromPromise2: Promise.reject('second'),
  }).then((results) => {
    const { resultFromPromise1, resultFromPromise2 } = results;
    console.log(resultFromPromise1, resultFromPromise2);
  });