Javascript(Chrome扩展):如何使用fetch正确执行多个API调用，并强制代码等待调用完成

Question

我正在尝试使用gmailapi创建一个chrome扩展。我使用一个api调用来获取某些信息，然后循环查看结果，并根据每个结果执行另一个api调用。一旦这些调用完成，剩下的代码就会运行。我现在面临的问题是，在获取返回信息之前，其余的代码正在执行。

下面是不起作用的函数。我在代码中添加了4个标志，以便更好地说明这个问题。正确的行为应该输出标志1，然后循环2，然后循环3，然后输出4。然而，实际行为输出标志1，然后循环2，然后循环4，然后循环通过标志3。

我的一个理论是，原因是我在.then((中使用了fetch。如果这是问题所在，我该如何解决？或者它与获取异步有什么关系？任何建议或有用的链接将不胜感激。

非常感谢！

let senderList = new Array();
let init = {
method: 'GET',
async: true,
headers: {
Authorization: 'Bearer ' + token,
'Content-Type': 'application/json'
},
'contentType': 'json'
};
fetch(
'https://gmail.googleapis.com/gmail/v1/users/me/messages?key=ABCDEFGHIJKLMNOPQRSTUVWXYZ1234',
init)
.then((response) => response.json())
.then(function(data) {
console.log("Flag 1")
let messageResponse = data.messages; //Array of Message Objects
for (let i = 0; i < messageResponse.length; i++) {
console.log("Flag 2")
fetch(
'https://gmail.googleapis.com/gmail/v1/users/me/messages/' + messageResponse[i].id +
'?key=ABCDEFGHIJKLMNOPQRSTUVWXYZ1234',
init)
.then((response) => response.json())
.then(function(message) {
let headers = message.payload.headers;
console.log("Flag 3")
for (let i = 0; i < headers.length; i++) {
if (headers[i].name == 'From'){
senderList.push(headers[i].value);
}              
}               
});          
}
}).then(function() {
console.log("Flag 4")
onSuccess(senderList);
});        
}

Answer 1

在Promise.all中使用async/await语法，该语法在所有Promise都实现时解析：

run();
async function run() {
const list = await getSenderList();
console.log(list, list.errors);
}
async function getSenderList() {
const API_URL = 'https://gmail.googleapis.com/gmail/v1/users/me/messages/';
const API_KEY = '?key=...';
const INIT = {method: 'GET', /* ... etc. */ };
const data = await fetchJson(API_URL + API_KEY);
const senderList = [];
senderList.errors = {};
await Promise.all(data.messages.map(async msg => {
const msgData = await fetchJson(API_URL + msg.id + API_KEY, INIT);
if (msgData instanceof Error) {
senderList.errors[msg.id] = msgData;
return;
}
const headers = msgData.payload.headers;
for (const h of headers) {
if (h.name === 'From') {
senderList.push(h.value);
}
}
}));
return senderList;
}
function fetchJson(url, init) {
return fetch(url, init).then(r => r.json()).catch(err => err);
}