ReactJS метод запроса асинхронного глобального API, как обрабатывать ответ?

Question

Я пытаюсь создать глобальную функцию запроса API, учитывая ее повторяемость. У меня проблема, несмотря на то, что объект responseBody не имеет значение null, когда функция завершается, ответ кажется нулевым?

Я могу только предположить, что это частично из-за объекта, возвращаемого до его обновления.

Вот функция:

функция экспорта restRequest (URL, метод, содержимое, тело) {

fetch(API_BASE_URL + url, {
    method: method,
    headers: new Headers({
        'Content-Type': content,
        'Access-Control-Request-Method': method,
        // 'Authorization': localStorage.getItem(ACCESS_TOKEN)
    }),
    body: body
}).then(
    function (response) {

        response.json().then((data) => {
            let json = JSON.parse(JSON.stringify(data));

            let responseBody = {
                code: response.status,
                body: json
            };

            //at this point the responseBody is not null

            return responseBody;
        });
    }
)
    .catch(function (err) {
        console.log('Fetch Error :-S', err);
    });

Однако, если я позвоню:

    let response = restRequest('/app/rest/request', 'GET', 'application/json;charset=UTF-8', null);

ответ всегда нулевой.

Каков наилучший способ справиться с этим?

Answer 1

Он асинхронный, поэтому любой вызов restRequest не сразу вернет responseBody =, который вам нужен для правильной цепочки обещаний, и вызов .then при вызове restRequest. Верните вызов fetch из функции restRequest и избегайте антипаттерна обратного вызова-обещания, немедленно возвращая response.json(), вместо того, чтобы вкладывать в него .then:

export const restRequest = (url, method, content, body) => (
  fetch(API_BASE_URL + url, {
    method: method,
    headers: new Headers({
      'Content-Type': content,
      'Access-Control-Request-Method': method,
      // 'Authorization': localStorage.getItem(ACCESS_TOKEN)
    }),
    body
  })
  .then(response => Promise.all([response.status, response.json()])
  .then(([code, body]) => ({ code, body }))
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  })
);

затем сделайте

restRequest('/app/rest/request', 'GET', 'application/json;charset=UTF-8', null)
  .then(response => {
    // do stuff with response. (if there was an error, response will be undefined)
  });