使用Promise合並API請求

Question

由於使用了插件的api，因此我無法正常使用。 我需要合並兩個不同的請求。 我在用下面的東西。

我可以獲得響應，但是似乎無法檢查response.ok並返回合並的數據：

export function fetchCategories() {
    const firstPage =
        "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/categories?per_page=60&page=1";
    const secondPage =
        "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/categories?per_page=60&page=2";

    return dispatch => {
        dispatch(isLoading(true));
        Promise.all([fetch(firstPage), fetch(secondPage)])
            .then(response => {

                // check for ok here
                response.ForEach(response => {
                    if (!response.ok) throw Error(response.statusText);
                });
                dispatch(isLoading(false));
                return response;
            })
            .then(response => response.json())
             // dispatch combined data here
            .then(data => dispatch(fetchSuccessCategories(data)))
            .catch(() => dispatch(hasErrored(true)));
    };
}

有任何想法嗎？

Answer 1

您正在檢查.ok罰款，因為它處於循環中，但是您的response實際上是兩個Response對象的數組，它沒有.json()方法。 您可以執行Promise.all(responses.map(r => r.json())) ，但是我建議編寫一個輔助函數，該函數對一個請求執行完整的諾言鏈，然后調用兩次：

function fetchPage(num) {
   const url = "http://wordpress.rguc.co.uk/index.php/wp-json/tribe/events/v1/categories?per_page=60&page="+num;
   return fetch(url).then(response => {
       if (!response.ok)
           throw new Error(response.statusText);
       return response.json();
   });
}

export function fetchCategories() {
    return dispatch => {
        dispatch(isLoading(true));
        Promise.all([fetchPage(1), fetchPage(2)]).then(data => {
            dispatch(isLoading(false));
            dispatch(fetchSuccessCategories(merge(data)));
        }, err => {
            dispatch(isLoading(false));
            dispatch(hasErrored(true));
        });
    };
}