如何僅將async/await用于“for陳述句”

我想使用異步函式“submitToTheOthers”，我希望let items = []它會在“submitToTheOthers”完成后運行。但它沒有等到“submitToTheOthers”完成。可能是因為在“submitToTheOthers”中沒有等待。因此，我想像 await 一樣在 'submitToTheOthers' 中宣告，但我不知道如何。

我可以在 'updateGeneralInfoToOther' 處使用 await，但隨后我無法幾乎同時為所有服務器運行 updateGeneralInfoToOther，如果其中一臺服務器出現錯誤，則我無法在 for 陳述句中從服務器運行。我想使用 await 或 promise 之類的陳述句或更大的范圍。

讓它等待“submitToTheOthers”的好方法是什么？

ps）我希望了解舊語法，因為我可能需要在 Internet Explorer XD XD TT 上使用它

設定.vue

<template>
  <div>
    <button class="point" @click="submitTotalServer()">submitTotalServer</button>
  </div>
</template>
<script>
import {
  updateGeneralInfoToOther,
} from '@/api/settings'
export default {
  data() {
    return {
      serverNames: ['a server', 'b server'],
      idxs: [0,1],
      serverFullAddress: ['http://localhost:12345','http://randomUrl:12345' ]
      serverResCheck: [],
    }
  },
methods: {
    async submitTotalServer() {
      await this.submitToTheOthers()  // this function      
      
      let items = []  // here
      for(let i=0; i< this.idxs.length ; i  ){
        if(!this.serverResCheck[i]){
          items.push(this.serverNames[i])
        }
      }
      if(items == []){
        alert('saved in all servers')
      }else{
        alert(`[${items}] Error`)
      }
      
    },
    async submitToTheOthers(){
      let data = {
        data : 'test',
      }
      
      for (let i=0; i< this.idxs.length ;i  ){
          updateGeneralInfoToOther(1, data, this.serverFullAddress[i]').then((res) => // axios function 
          {
            if (res.status == 200) {
              this.serverResCheck[i]= true
            }else{
              this.serverResCheck[i]= false
            }
          })
        }
      }
    },
</script>

api/settings.js

// ...
export function updateGeneralInfoToOther(id, data, serverAddress) {
  axios.defaults.timeout = 5000;
  data.serverAddress = serverAddress
  
  return axios.post(`/api/settings/generalToOther/${id}`, data)
}
// ...

uj5u.com熱心網友回復：

即使您已標記async submitToTheOthers，您實際上并沒有使其表現得像一個異步函式。

在該函式中，我假設這是 async: 的這一行updateGeneralInfoToOther(1, data, this.serverFullAddress[i]')。你在回圈中呼叫這個函式，但問題是你沒有呼叫await它，也沒有回傳承諾。

你需要把await它放在它前面，但這將使它等待每個人處理回圈中的下一個。另一種方法是將每個承諾存盤在一個陣列中，然后await Promise.all(promises)在函式的末尾執行。

uj5u.com熱心網友回復：

也許這就是你需要 的等待

 async function test() {
let array=[1,2,3,4,5]
          for await (const elem of array) {
           
             console.log(elem);
          }
       }

uj5u.com熱心網友回復：

問題的關鍵是你的for回圈沒有等待回傳的承諾updateGeneralInfoToOther()來解決。為了讓您的代碼作業，這是強制回圈到 的快速修復await，即：

for (let i=0; i< this.idxs.length ;i  ) {
    await updateGeneralInfoToOther(1, data, this.serverFullAddress[i]).then((res) => {
        if (res.status == 200) {
            this.serverResCheck[i]= true
        } else {
            this.serverResCheck[i]= false
        }
    })
}

但是，這種解決方案并不理想，因為您必須單獨等待每個請求：確實沒有理由這樣做。更好的解決方案是簡單地一起執行所有這些異步操作，然后等待所有這些操作都得到解決。您的submitToOthers()函式將回傳一個 promise 陣列：

return this.idx.map((_entry, i) => {
    return updateGeneralInfoToOther(1, data, this.serverFullAddress[i]).then((res) => {
        if (res.status == 200) {
            this.serverResCheck[i] = true
        } else {
            this.serverResCheck[i] = false
        }
    })
});

然后，只需使用Promise.all()等待解決此承諾陣列即可：

async submitTotalServer() {
    await Promise.all(this.submitToTheOthers());

    // Rest of the logic
    // ...
}

uj5u.com熱心網友回復：

通過標記一個函式，async您是在告訴它：如果遇到await，請不要繼續執行其余代碼，直到等待的承諾回傳（已解決或被拒絕）。但是在你的submitToTheOthers函式內部，你根本沒有使用await，所以請求是一次性發出的，函式回傳而不等待它們。

盡管await在每次呼叫前放置一個可以解決您的問題，但在回圈內部，每次迭代都會等待前一次完成，這肯定比一次發送所有請求需要更長的時間。從您所展示的內容來看，它們似乎可以并行運行。

為此，您可以使用Promise.all()which 旨在并行處理多個單獨的承諾。以下應該可以作業，而無需對您的代碼進行任何其他更改：

submitToTheOthers() {
  return Promise.all(
    this.idxs.map((_, i) => updateGeneralInfoToOther(
      1,
      { data: 'test' },
      this.serverFullAddress[i]
    ) 
      .then(r => { 
         this.serverResCheck[i] = r.status === 200;
         return r;
      })
      .catch(e => {
         this.serverResCheck[i] = false;
         return e;
      })
  ));
}

uj5u.com熱心網友回復：

async function sample () {
 const data = await doSth();

for (const data of datas) {
 const contents = await YOUR_FUNCTION
 console.log();
}} 

標籤：javascript Vue.js

上一篇：ES12：空合并運算子和物件

下一篇：頁面重繪問題