javascript/react/redux async 리팩토링 대기

Question

fetchRelationships 함수가 비동기 대기를 사용하도록 리팩토링하고 싶습니다. 이 코드가 중첩 된 .then (response.json().then((json) =>...)을 포함하고 있기 때문에 가장 좋은 방법은 무엇인지 모르겠습니다.

리팩토링 된 버전을 게시 할 수 있습니까?

export const fetchRelationshipsError = (error) => { 
    return { 
    type: FETCH_RELATIONSHIPS_FAILURE, 
    payload: { error } 
    }; 
}; 

export const fetchRelationshipsRequest =() => { 
    return { type: FETCH_RELATIONSHIPS_REQUEST }; 
}; 

export const fetchRelationshipsSuccess = (relationships) => { 
    return { 
    type: FETCH_RELATIONSHIPS_SUCCESS, 
    payload: relationships 
    }; 
}; 

export const fetchRelationships = (url) => { 
    return (dispatch) => { 
    dispatch(fetchRelationshipsRequest()); 

    fetch(url, config) 
    .then((response) => { 
     const responseObj = { 
     response: response, 
     payload: response.json().then((json) => { 
      return { body: json } 
     }) 
     }; 

     if (!response.ok) { 
     const error = new Error(response.statusText); 
     responseObj.payload.then((response) => { 
      show_error_alert(response.body); 
      dispatch(fetchRelationshipsError(response.body)); 
     }); 
     throw error; 
     } 

     return responseObj.payload; 
    }) 
    .then((response) => { 
     dispatch(fetchRelationshipsSuccess(response.body)) 
    }) 
    .catch((error) => { console.log('Request failed', error); }); 
    }; 
}; 

솔루션 :

export const fetchRelationships = (url) => { 
    return async (dispatch) => { 
    dispatch(fetchRelationshipsRequest()); 

    try { 
     const response = await fetch(url, config); 
     const jsonResponse = await response.json(); 

     if (!response.ok) { 
     show_error_alert(jsonResponse); 
     dispatch(fetchRelationshipsError(jsonResponse)); 

     const error = new Error(response.statusText); 
     throw error; 
     } 

     dispatch(fetchRelationshipsSuccess(jsonResponse)); 

    } catch(error) { 
     console.log('Request failed', error); 
    } 
    }; 
}; 

Answer 1

아픈이에 자상을 :

그것은 말한다

export const fetchRelationshipsError = (error) => { 
    return { 
    type: FETCH_RELATIONSHIPS_FAILURE, 
    payload: { error } 
    }; 
}; 

export const fetchRelationshipsRequest =() => { 
    return { type: FETCH_RELATIONSHIPS_REQUEST }; 
}; 

export const fetchRelationshipsSuccess = (relationships) => { 
    return { 
    type: FETCH_RELATIONSHIPS_SUCCESS, 
    payload: relationships 
    }; 
}; 

export const fetchRelationships = (url) => { 
    return async (dispatch) => { 

    dispatch(fetchRelationshipsRequest()); 

    try{ 

     const response = await fetch(url, config) 
     const jsonResponse = await response.json() 

     if(!response.ok){ 

     show_error_alert(jsonResponse); 
     dispatch(fetchRelationshipsError(jsonResponse)); 

     const error = new Error(response.statusText); 
     throw error; 
     } 

     dispatch(fetchRelationshipsSuccess(jsonResponse)); 

    }catch(error){ 
     console.log('Request failed', error); 
    } 

    };