如何在多个承诺中使用多个值？

Question

我正在编写一个 firefox 插件，我需要使用 browser.storage.sync 存储一些值。我需要使用此方法存储和获取多个值。我写了一个简单的代码来获取值

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

问题是我不喜欢代码的这种嵌套结构。我想做这样的事情

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

问题是 b1 和 b2 本身是承诺，我不知道如何 return 一个值。

如何在多个承诺中使用多个值？

Answer 1

尝试async/await

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

Answer 2

Promise.all 是你的人

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

与 await 不同的是，这将同时执行两个请求并等待两个请求都完成后再调用 .then 中的函数。

Answer 3

使用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
}

或者您可以使用 Promise。 all() 如果两者都是独立的调用并且想 运行 并行。

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

Answer 4

当不需要时，不 运行 多个异步函数会更有效。您可以一次获取所有值，而不是一个一个地获取值。

1. 全部搞定

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

2. 只获取需要的（wOxxOm 也提到过）

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