如何解决将嵌套的 promise 转换为 async/await 语法
我有一个嵌套的 promise 来获取数据,然后将其呈现给 DOM。
我正在尝试将其转换为 async/await 语法,但因为它嵌套了一个 Promise。我在转换它时遇到了麻烦。
fetch(searchUrl)
.then(function (response) {
return response.json()
})
.then(function (data) {
searchLoader.style.display = "none";
for (let i = 0; i < 10; i++) {
let stock = `${data[i].name},(${data[i].symbol})`;
listofStocks.innerHTML += `<li class="list-group-item"><a href="./company.html?symbol=${data[i].symbol}">${stock}<a/></li>`;
// console.log(data[i].symbol)
}
return Promise.all(data.map(item => fetch(`${BaseUrl}company/profile/${item.symbol}`)));
})
.then(function (response) {
return Promise.all(response.map(x => x.json()));
})
.then(function (data1) {
console.log(data1);
for (let i = 0; i < listofStocks.children.length; i++) {
if (data1[i].profile.changes >= 0) {
listofStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listofStocks.children[i].innerHTML} <span class="color-prc" style="color:green;"> ${data1[i].profile.changesPercentage}</span>`;
} else {
listofStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listofStocks.children[i].innerHTML} <span class="color-prc"> ${data1[i].profile.changesPercentage}</span>`;
}
}
谢谢
解决方法
它似乎在工作@bergi - 感谢您的指针
const response = await fetch(searchUrl);
const data = await response.json();
searchLoader.style.display = "none";
for (let i = 0; i < 10; i++) {
let stock = `${data[i].name},(${data[i].symbol})`;
listOfStocks.innerHTML += `<li class="list-group-item"><a href="./company.html?symbol=${data[i].symbol}">${stock}<a/></li>`;
// console.log(data[i].symbol)
}
const response1 = await Promise.all(data.map(item => fetch(`${BaseUrl}company/profile/${item.symbol}`)));
const data1 = await Promise.all(response1.map(x => x.json()));
for (let i = 0; i < listOfStocks.children.length; i++) {
if (data1[i].profile.changes >= 0) {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc" style="color:green;"> ${data1[i].profile.changesPercentage}</span>`;
} else {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc"> ${data1[i].profile.changesPercentage}</span>`;
}
}
```
,
这是将 Promise.then(...).then(...).then(....)
链转换为 async/await
代码的方式:-
async function processStuff(){
const data = await fetch(searchUrl).then((response)=>response.json());
searchLoader.style.display = "none";
for (let i = 0; i < 10; i++) {
let stock = `${data[i].name},(${data[i].symbol})`;
listOfStocks.innerHTML += `<li class="list-group-item"><a href="./company.html?symbol=${data[i].symbol}">${stock}<a/></li>`;
// console.log(data[i].symbol)
}
const response = await Promise.all(data.map(item => fetch(`${BaseUrl}company/profile/${item.symbol}`)));
const data1 = await Promise.all(response.map(x => x.json()));
for (let i = 0; i < listOfStocks.children.length; i++) {
if (data1[i].profile.changes >= 0) {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc" style="color:green;"> ${data1[i].profile.changesPercentage}</span>`;
} else {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc"> ${data1[i].profile.changesPercentage}</span>`;
}
}
}
processStuff();
注意 - 我在这里没有为 Promise.all()
做任何特别的事情,因为它只是返回一个 Promise
。如果只是 Promise.resolve(2)
,方法将是相同的。
应该是这样的:
try {
const response = await fetch(searchURL)
const data = await response.json()
searchLoader.style.display = "none";
for (let i = 0; i < 10; i++) {
let stock = `${data[i].name},(${data[i].symbol})`;
listOfStocks.innerHTML += `<li class="list-group-item"><a href="./company.html?symbol=${data[i].symbol}">${stock}<a/></li>`;
// console.log(data[i].symbol)
}
const data1 = await Promise.all(data.map(async (item) => {
const response = await fetch(`${BaseUrl}company/profile/${item.symbol}`)
return response.json()
}));
for (let i = 0; i < listOfStocks.children.length; i++) {
if (data1[i].profile.changes >= 0) {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc" style="color:green;"> ${data1[i].profile.changesPercentage}</span>`;
} else {
listOfStocks.children[i].innerHTML = `<img class="logo-for-list" src="${data1[i].profile.image}" /> ${listOfStocks.children[i].innerHTML} <span class="color-prc"> ${data1[i].profile.changesPercentage}</span>`;
}
}
} catch (e) {
console.log(e)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。