鍍金池/ 問答/HTML/ redux中如何避免重復(fù)定義每個異步action 的開始請求，請求成功，請求失敗

redux中如何避免重復(fù)定義每個異步action 的開始請求，請求成功，請求失敗狀態(tài)？

主要是想根據(jù)不同的請求狀態(tài)來進行不同的組件渲染，比如開始請求，就將組件渲染為 loading，請求成功就開始渲染數(shù)據(jù)列表等等。

這里有個問題，如果把這三個action 定義成全局的，然后要用到再引入的話，那這樣當(dāng)我進入第一個頁面，狀態(tài)依次經(jīng)歷了請求中，請求成功。 當(dāng)我進入第二個頁面的時候，這時候請求狀態(tài)已經(jīng)是成功的狀態(tài)了，那我那些需要有數(shù)據(jù)才能渲染的組件，這個時候就會報錯了（因為一進來的時候，判斷到狀態(tài)已經(jīng)是 成功了，所以就渲染，此時是沒有數(shù)據(jù)的）

求指教一種可行的方案~

回答
編輯回答
陌南塵

其實不必這樣，axios有一個全局攔截器，可以攔截發(fā)送請求和接受請求。然后你寫一個loading組件，在全局攔截器中引入，發(fā)送請求時候渲染loading，結(jié)束后隱藏loading。至于你說的渲染數(shù)據(jù)的問題，可以在組件內(nèi)利用條件渲染來做。有數(shù)據(jù)就渲染，沒有數(shù)據(jù)就渲染null。具體代碼如下：

import axios from 'axios';
import { Toast } from 'antd-mobile';
axios.interceptors.request.use((config)=>{
    Toast.loading('加載中',0);
    return config
});
axios.interceptors.response.use((config)=>{
    Toast.hide();
    return config
});
2018年9月20日 23:20