2017-06-21 56 views
3

我是ReactJS中的新成員,對於我的ajax調用,我嘗試使用Axios庫。這太棒了,但現在我想知道是否有辦法知道axios攔截器中是否存在未決請求,因爲我希望顯示每個ajax調用的加載覆蓋(如果它不是可見的),並在ALL時刪除覆蓋承諾得到解決。 現在我開始開發與攔截:知道axios中是否有未決請求

axios.interceptors.request.use(function (config) { 
    //here logi of show loading 
    return config; 
}, function (error) { 
    return Promise.reject(error); 
}); 

而且我想補充一下這樣的:

axios.interceptors.respose.use(function (config) { 
    //logic remove loading if it is last response 
    return config; 
}, function (error) { 
    return Promise.reject(error); 
}); 

那麼如何,(如果它是不可能性)知道這是否是最後的反應? 使用ReactJs之前,我用角1.x和在$http service

$http.pendingRequests 

有一個在愛可信類似$ http服務?

+0

這樣做的另一種方法是在你的UI使用的狀態。例如,您的反應組件中的狀態isLoading首先設置爲false。然後,當提取完成時,您將狀態修改爲true。在您的UI中,如果isLoading爲false,則呈現加載組件。看看這個實現這個演示:http://jsbin.com/cakireweku/edit?html,js,output –

+0

Thankyou,是的,但在這種方式,我必須處理每個Ajax調用加載,我想處理像攔截器一樣加載到一個地方,所以我不必擔心setState或在每次調用中顯示加載。 – LorenzoBerti

回答

2

這是我的解決辦法:)

var numberOfAjaxCAllPending = 0; 

// Add a request interceptor 
axios.interceptors.request.use(function (config) { 
    numberOfAjaxCAllPending++; 
    // show loader 
    return config; 
}, function (error) { 
    return Promise.reject(error); 
}); 

// Add a response interceptor 
axios.interceptors.response.use(function (response) { 
    numberOfAjaxCAllPending--; 
    console.log("------------ Ajax pending", numberOfAjaxCAllPending); 

    if (numberOfAjaxCAllPending == 0) { 
     //hide loader 
    } 
    return response; 
}, function (error) { 
    return Promise.reject(error); 
}); 
+0

這很有幫助。 Ajax請求應該在此之後。 – Ukor

相關問題