Chain promises with localforage

Question

I am struggling with promises. I see how the chain of events is happening through .then().then().then().then().then().then().then().then().then().then().then().then() but I can not figure out how to make it end. I was hoping I could just make a simple :

 .then(callback(mydata))

However, I can't get that to work. I am trying to accomplish this.

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);
      });
   }
}

Please help me break out of this madness.

Answer 1

The [previously] accepted answer to this question is using the explicit promise creation antipattern, a practice that makes code extra complicated and buggy.

You can accomplish what you are trying to do far more cleanly, like this:

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

Example usage:

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

The above obtains an array of values, which are not matched up with their respective keys. If you would like the values paired with their keys, you can do this:

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 };
                });
        }));
    });
}

Or you could break out one of the inner functions to reduce the nesting:

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));
    });
}

In either case, the code to call and use the getLocalForageData function would be the same as above.

Answer 2

[Edit] The JLRishe's answer is not bad but it returns an array of objects hardly readable for next uses (you'll need a loop to get the values), and also seems to forget null values, so the complete and trickery solution should be more like:

  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)
      })
    })
  }

Usage:

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

Note:

Better yet, this solution use ES6 and jsLint highest quality standards

More:

Promise examples with localForage : https://localforage.github.io/localForage/#data-api-getitem

Using promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Using Object assign: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Using spread operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 3

Several features of the code in the question are not necessary :

• new Promise(...): localForage.keys() returns a promise which forms the root of a promise chain.
• callback: by returning a promise from getlocalforagedata(), the caller can chain getlocalforagedata().then(...) avoiding the need for a callback to be passed.
• Outer var arr: a correctly constructed promise chain can gather and deliver results without any outer variables.

The following are necessary :

• to aggregate the promises returned by localForage.getItem(key) and to return a promise from that step in the chain.
• to perform the tests if (err.length > 0) and if (arr.length > 0) in a further chained .then() that waits for the localForage.getItem(key) promises to settle.

Try this :

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.
            }
        });
    }
}

Call as follows :

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

getlocalforagedata() could be made to work with a callback but it's much better practice to return a promise and allow the caller to chain getlocalforagedata().then(...).