使用 localforage 链式承诺

Question

我正在努力兑现承诺。我通过.then().then().then().then().then().then().then().then().then().then().then().then() 看到事件链是如何发生的，但我不知道如何让它结束。我希望我能做一个简单的：

 .then(callback(mydata))

但是，我无法让它工作。我正在努力做到这一点。

function doSomethingCallback(theArrayComesBackHere) {
    theArrayComesBackHere.forEach(/*do stuff*/);
}    

button.onclick = () => {
   myobj.getlocalforagedata(doSomethingCallback);
}

myobj = {
   getlocalforagedata: (callback) => {
      var arr = [];
      localForage.keys().then((keys) => {
          keys.forEach((key) => {
              localForage.getItem(key).then(function (results) {
                  arr.push(results);
              });
          });
          callback && callback(arr);
      });
   }
}

请帮助我摆脱这种疯狂。

Answer 1

[以前] 接受此问题的答案是使用 explicit promise creation antipattern，这种做法会使代码更加复杂和错误。

你可以更干净地完成你想做的事情，像这样：

function getLocalForageData() {
    return localForage.keys().then(function (keys) {
        return Promise.all(keys.map(function (key) {
            return localForage.getItem(key);
        });
    });
}

示例用法：

getLocalForageData()
    .then(function (values) {
        console.log(values);
    })
    .catch(function (error) {
        console.error(error);
    });

上面获得了一个值数组，这些值与它们各自的键不匹配。如果您希望值与它们的键配对，您可以这样做：

function getLocalForageData() {
    return localForage.keys().then(function (keys) {
        return Promise.all(keys.map(function (key) {
            return localForage.getItem(key)
                .then(function (value) {
                    return { key: key, value: value };
                });
        }));
    });
}

或者你可以打破一个内部函数来减少嵌套：

function getLocalForageValueWithKey(key) {
    return localForage.getItem(key)
        .then(function (value) {
            return { key: key, value: value };
        });
}

function getLocalForageData() {
    return localForage.keys().then(function (keys) {
        return Promise.all(keys.map(getLocalForageValueWithKey));
    });
}

在任何一种情况下，调用和使用getLocalForageData 函数的代码都与上述相同。

Answer 2

[编辑] JLRishe's answer 还不错，但它返回一个对象数组，下次使用时很难读取（你需要一个循环来获取值），而且似乎也忘记了null 值，所以完整而诡计多端的解决方案应该更像：

  const getLocalForageDataByKeys = () => {
    return localForage.keys().then(keys => {
      return Promise.all(keys.map(key => {
        return localForage.getItem(key)
          .then(value => {
            return { [key]: value }
          })
          .catch(error => {
            console.log(error)
            return { [key]: null }
          })
      })).then(arr => {
        return Object.assign(...arr)
      })
    })
  }

用法：

getLocalForageDataByKeys()
  .then(obj => {
    console.log(obj) // { keyA: 'valueA', keyB: 'valueB' }
  }).catch(error => {
    console.log(error) // do sth with error
  })

注意：

更好的是，此解决方案使用 ES6 和 jsLint 最高质量标准

更多：

localForage 的 Promise 示例：https://localforage.github.io/localForage/#data-api-getitem

使用承诺：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

使用对象赋值：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

使用扩展运算符：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 3

问题中代码的一些功能不是必需的：

• new Promise(...): localForage.keys() 返回一个构成 Promise 链根的 Promise。
• callback：通过从getlocalforagedata() 返回一个promise，调用者可以链接getlocalforagedata().then(...)，避免需要传递回调。
• Outer var arr：一个正确构建的 Promise 链可以在没有任何外部变量的情况下收集和交付结果。

以下是必要的：

• 聚合localForage.getItem(key) 返回的promise，并从链中的该步骤返回promise。
• 在等待localForage.getItem(key) 承诺解决的进一步链接的.then() 中执行测试if (err.length > 0) 和if (arr.length > 0)。

试试这个：

myobj = {
    getlocalforagedata: () => {
        return localForage.keys()
        .then(keys => {
            // Use `keys.map(...)` to return an array of promises.
            // Then use `Promsie.all()` to aggregate the promises returned by `localForage.getItem(key)`.
            return Promise.all(keys.map(key => localForage.getItem(key)));
        })
        .then(arr => { // an array of results
            // These tests must be performed in a chained `then()`,
            // which will wait for all the individual `localForage.getItem(key)` results (or errors) to be delivered
            if (arr.length > 0) {
                return arr; // deliver a non-empty array
            } else {
                throw new Error('no results'); // throw error down the promise chain's error path.
            }
        });
    }
}

调用如下：

myobj.getlocalforagedata()
.then((results) => {
    // Work with results
})
.catch((error) => {
    // Do whatever with error.
    // Either return some default value or re-throw `error`
});

getlocalforagedata() 可以与回调一起使用，但最好的做法是返回一个承诺并允许调用者链接getlocalforagedata().then(...)。