How to work with multiple values in multiple promises?

Question

I am writing a firefox addon and I need to store some values using browser.storage.sync. I need to store and fetch multiple values using this method. I wrote a simple code which fetches the values

browser.storage.sync.get('a1').then(r1 => {    
    browser.storage.sync.get('a2').then(r2 =>{
        console.log(r1.a1);
        console.log(r2.a2);
    });    
});

The thing is I dont like this nested structure of the code. I want to do something like this

// return b1 and b2 as values
let b1 = browser.storage.sync.get('a1').then(r1 => {    
   return r1.a1;
});

let b2 = browser.storage.sync.get('a2').then(r2 =>{
    return r2.a2
});

The problem is the b1 and b2 itself are promises and I don't know how to return a value instead.

How to work with multiple values in multiple promises?

use async/await - or Promise.all if you can't use async/await (and you can do both get's "simultaneously" — Jaromanda X, Jun 26 '21 at 06:37
Simply read multiple keys at once: browser.storage.sync.get(['a1', 'a2'], r => ......... — wOxxOm, Jun 26 '21 at 06:43

score 2 · Answer 1 · answered Jun 26 '21 at 06:57

Promise.all is your guy

Promise.all([
    browser.storage.sync.get('a1'),
    browser.storage.sync.get('a2')
]).then(([r1, r2]) => {
    // …
})

Unlike await this will do both requests simultaneously and wait until both are done before calling the function in .then.

score 1 · Answer 2 · answered Jun 26 '21 at 06:37

1

try async/await

async funciont name() {
    let b1 = (await browser.storage.sync.get('a1')).a1;
    let b2 = (await browser.storage.sync.get('a2')).a2;
}

answered Jun 26 '21 at 06:37

林期斌

11
1

erosman · Accepted Answer · 2021-06-26T13:32:21.583

It is more efficient not to run multiple async functions, when not needed. Instead of getting values one by one, you can get them all once.

Get them all

browser.storage.local.get().then(result => {
  console.log(result.a1); // or result['a1']
  console.log(result.a2); // or result['a2']
});

Get only the ones needed (as also mentioned by wOxxOm)

browser.storage.local.get(['a1', 'a2']).then(result => {
  console.log(result.a1); // or result['a1']
  console.log(result.a2); // or result['a2']
});

score 0 · Answer 4 · answered Jun 26 '21 at 07:01

Use async/await

const getb1 = async () => {
  let resp = (await browser.storage.sync.get('a1'));
  return resp.a1
}

const getb2 = async () => {
  let resp = (await browser.storage.sync.get('a2'));
  return resp.a2
}

or you can use Promise. all() if both are independent calls and wanted to run parallelly.

const getb1b2 = async () => {
  let [resp1,resp2] = await Promise.all([browser.storage.sync.get('a1'), browser.storage.sync.get('a2')]);
  let b1 = resp1.a1;
  let b2 = resp2.a2;
}

How to work with multiple values in multiple promises?

4 Answers4