如何在多个 Promise 中使用多个值？ [复制]答案

【问题标题】：How to work with multiple values in multiple promises? [duplicate]如何在多个 Promise 中使用多个值？ [复制]
【发布时间】：2021-09-09 08:54:44
【问题描述】：

我正在编写一个 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 本身是承诺，我不知道如何返回值。

如何在多个 Promise 中使用多个值？

【问题讨论】：

使用 async/await - 或 Promise.all 如果你不能使用 async/await （你可以同时做两个 get's
一次读取多个键：browser.storage.sync.get(['a1', 'a2'], r => .........

标签： javascript firefox promise firefox-addon firefox-addon-webextensions

【解决方案1】：

尝试异步/等待

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

【讨论】：

【解决方案2】：

Promise.all 是你的人

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

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

【讨论】：

【解决方案3】：

使用异步/等待

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

【讨论】：

【解决方案4】：

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

全部获取

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

只获取所需的（wOxxOm 也提到过）

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

【讨论】：