2016-03-02 46 views
1

React是純粹的狀態,我的App組件狀態中有一個status變量,用於跟蹤應用程序當前正在執行的操作。爲了簡化,我們假設有三種狀態:Waiting for Input,Fetching URLError在React中處理異步請求的最佳模式是什麼?

當用戶提交一個URL時,狀態變爲Fetching URL,並且啓動一個$.get()請求以從中獲取數據。一旦請求成功或失敗,應用程序狀態將分別變爲Waiting for InputError

我的問題是,當用戶提交Fetching URL狀態中的另一個URL時,取消先前的URL請求並重新輸入新URL的Fetching URL狀態是合理的。在React中處理這件事的最優雅的模式是什麼?目前,我的解決方案是檢查$.get()請求的success()fail()回調,以確保在更新狀態之前當前的URL沒有更改。然而,這個解決方案並沒有擴展,因爲我必須在每一個我製作的異步請求的每個回調中包含檢查。

+0

你應該看看[flux架構](https://facebook.github.io/flux/docs/overview.html)。單獨做出反應並不適合構建整個應用程序。具體來說,它不是專爲處理你正在談論的事情而設計的。 [Redux](https://github.com/reactjs/redux)是一個非常流行的通用類實現,我發現它非常好用。祝你好運。 – naomik

回答

0

如果您只想在所有提取完成後進入「等待」狀態,則需要以某種方式跟蹤它們。這不是一個真正的React問題。

最簡單的解決方案就是將打開的提取請求存儲在某個數組中,並在完成時將其刪除。當你刪除它們時,檢查列表是否爲空,並相應地更新你的狀態。

相關問題