[英]converting nested promise into async/await syntax
I have a nested promise that fetches data and then presents it to the DOM.我有一个嵌套的 promise 获取数据,然后将其呈现给 DOM。
I am trying to convert it into an async/await syntax, but because it is nested with a Promise.All I am having trouble converting it.我正在尝试将其转换为 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>`;
}
}
Thanks谢谢
it seems to be working @bergi - thanks for the pointer它似乎正在工作@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>`;
}
}
```
This is how you would convert a Promise.then(...).then(...).then(....)
chain to an async/await
code:-这就是您将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();
Note - There is nothing special I did here for Promise.all()
since it simply returns a Promise
.注意 - 我在这里为Promise.all()
做的没什么特别的,因为它只是返回一个Promise
。 Had it been just Promise.resolve(2)
, the approach would be the same.如果只是Promise.resolve(2)
,方法是一样的。
Should be something like this:应该是这样的:
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) }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.