Как игнорировать неудачный запрос при использовании Promise.all?

Question

Я создаю приложение React + Redux и сейчас работаю над функцией, которая выбирает определенное количество закладок пользователя на страницу.

Это выглядит так: когда пользователь делает закладку на ресурс, идентификатор ресурса сохраняется в базе данных и связывается с пользователем.Поэтому функция, над которой я работаю, выбирает идентификаторы закладок пользователя и делает запросы API, чтобы получить дополнительную информацию о каждом ресурсе и отобразить их пользователю в списке.Все запросы API заключены в Promise.all()

Моя проблема в том, что если ресурс, добавленный пользователем в закладки, был удален, запрос API, очевидно, приводит к ошибке 404, что приводит к ошибке Promise.all(),хотя остальные запросы успешны.Итак, как я могу игнорировать ошибку из этого единственного неудачного запроса и продолжать работать с успешными?

Вот моя функция:

export const fetchUserBookmarks = ( bookmarkType, reset ) => async ( dispatch, getState, api ) => {

    if( reset ) {
        dispatch({
            type: 'RESET_BOOKMARKS'
        });
    }

    var endpoint; 

    if( bookmarkType == 'projects' ) {

        endpoint = 'posts'; 

    } else if( bookmarkType == 'images' ) {

        endpoint = 'media'; 

    } else {

        endpoint = bookmarkType; 

    }

    const bookmarksIDs = getState().currentUser.bookmarks.IDs[ bookmarkType ];  
    const bookmarksPerPage = getState().currentUser.bookmarks.perPage;  
    const start = bookmarksPerPage * getState().currentUser.bookmarks[ bookmarkType ].resultsPage;
    const end = start + bookmarksPerPage;   
    const bookmarksSet = bookmarksIDs.slice( start, end );      
    const BOOKMARKTYPE = bookmarkType.toUpperCase();    

    dispatch({
        type: 'IS_FETCHING_BOOKMARKED_' + BOOKMARKTYPE, 
    });     

    try {

        const bookmarks = [];

        const getBookmarks = await Promise.all(
            bookmarksSet.map( bookmarkID => 
                api.get( '/wp-json/wp/v2/' + endpoint + '/' + bookmarkID )              
            )
        ); 

        getBookmarks.map( request => { 
            bookmarks.push( request.data )
        });     

        dispatch({
            type: 'HAS_FETCHED_BOOKMARKED_' + BOOKMARKTYPE, 
            payload: bookmarks
        });                             

    } catch( error ) {

        if( error.response !== undefined && error.response.status == 401 ) {                

            dispatch({
                type: 'IS_EMPTY_BOOKMARKED_' + BOOKMARKTYPE 
            });

        } else {

            dispatch({
                type: 'FAILED_FETCHING_BOOKMARKED_' + BOOKMARKTYPE 
            });

        }

    }

}

Answer 1

У меня может быть хак для вас, который я сейчас использую.Итак, что я делаю, когда нахожусь в ситуации, о которой вы упоминали, я избегаю использования блоков try / catch, а вместо этого создаю объект из результатов.В последнее время я часто использую redux-saga, поэтому я больше не попадаю в эту ситуацию.

В любом случае, вот код, который я использую

const buildResultObject = (promise) => {
    return promise
      .then(result => ({ success: true, result }))
      .catch(error => ({ success: false, error }));
};

Promise
  .all([p1, p2, p3].map(buildResultObject))
  .then( 
    results => {
      results.map(response => {
        if (response.success) {
          console.log(response.result);
        } else {
          console.log(`Boom: ${response.error}`);
        }
      })
    }
  );

Answer 2

Расширяя комментарий @ nikrb - вы можете перехватить все 404 ошибки в ваших запросах.

Не зная формата ответа API, соответствующий код может выглядеть примерно так:

const getBookmarks = await Promise.all(
  bookmarksSet.map(bookmarkID =>
    api.get('/wp-json/wp/v2/' + endpoint + '/' + bookmarkID)
      .catch((error) => {
        // avoid catching unexpected errors (not due to 404)
        if (error.statusCode !== 404) {
          throw error
        }
      })
  )
);