將嵌套的 promise 轉換為 async/await 語法

Question

我有一個嵌套的 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>`;
            }
          }

謝謝

Answer 1

它似乎正在工作@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>`;
        }
      }
    ```

Answer 2

這就是您將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) ，方法是一樣的。

Answer 3

應該是這樣的：

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