ReactJS /終極版/ Axios公司等待服務器請求以完成

Question

我有以下代碼：

handleDeleteBlackList(id, event) { 
    this.props.actions.deleteBlackListItem(id, this.props.token); 
    this.props.actions.fetchBlackListItems(this.props.token); 
    } 

第一行刪除從一些web服務的記錄，所述第二獲取更新後的數據。有時系統不會等待第一個請求完成，然後再執行第二個請求，我的「更新」數據根本沒有更新...

我正在尋找一些解決方案來等待第一個請求完成然後執行第二個請求。

編輯：

我已經使用與setTimeout函數的解決辦法，但它應該有固定它的一個更好的辦法...

Answer 1

嘗試使用一個承諾！

檢查谷歌文檔的承諾！

https://developers.google.com/web/fundamentals/getting-started/primers/promises

handleDeleteBlackList(id, event) { 
    return new Promise(function(accept,reject) { 
     perform_first_request() 
     .then(function(){ 
      perform_second_request() 
     }) 
    }) 
} 

Answer 2

也許使用異步

/等待。

async handleDeleteBlackList(id, event) { 
    const actionResponse = await this.props.actions.deleteBlackListItem(id, this.props.token); 
    // No idea what you have set your type: to in your action so I just made this up 
    if (actionResponse && actionResponse.type === 'DELETE_SUCCESS'){ 
     this.props.actions.fetchBlackListItems(this.props.token); 
    } 
    } 

這將取決於你如何結構化你的行動。需要看代碼deleteBlackListItem