Глобальные сервисы получения данных с сервера в React

Question

У меня есть несколько служб данных, которые я хочу добавить в свое приложение. Я хочу, чтобы эти службы были доступны для использования в нескольких компонентах и ​​чтобы избежать необходимости переписывать «функции выборки» в каждом компоненте. После некоторого исследования о получении данных с сервера и асинхронного поведения вызова (например, здесь ) я понимаю, что не существует простого способа вернуть данные из этого вызова, и единственный способ - выполнить зависимое выполнение внутри обратные вызовы.

Итак, я получил это решение Это хорошо работает, но мой вопрос: Это проблемное решение?

DataServices:

 static getDataTry2  (path, obj)  {

     fetch(path)
     .then(myResponse => myResponse.json())
     .then(arrivedData => {
       console.log("the arrived data ", arrivedData)
       obj.setState({
         try1 : arrivedData
       });

     });
   }

мой другой компонент:

componentDidMount() {

        DataServices.getDataTry2("ws/getEvents", this);


    }

Answer 1

Создание абстракции запроса является стандартным решением, но для разделения проблем ваша служба должна иметь возможность отправлять запросы, но она должна возвращать обещание, которым будет управлять вызывающая сторона.

Обычно абстракция запроса обрабатывает также ошибки 400/401 (для токенов обновления / выхода из системы), но не зависит от логики вызывающей стороны.

Вот так выглядит общая абстракция:

 /**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

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

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           The response data
 */
export default function request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON);
}

Тогда сервис будет выглядеть так:

import request from 'shared/lib/request';
import { API } from 'shared/constants';

const create = (content) => request(
  {
    url: API.MY_ENDPOINT,
    method: 'POST',
    data: content,
  });

const get = (id) => request(
  {
    url: `${API.MY_ENDPOINT}/${id}`,
    method: 'GET',
  });

const put = (content) => request(
  {
    url: `${API.MY_ENDPOINT}/${content.id}`,
    method: 'PUT',
    data: content,
  });

const MyEndpointService = {
  create,
  get,
  put,
};

export default MyEndpointService;

Использование, где вы хотите (также за пределами области действия реакции):

import MyEndpointService from '/API/MyEndpointService'

MyEndpointService.create(payload)
    .then((data) => {
    // code
    })
    .catch((errors) => {
    // error code
    });

Answer 2

Я бы предпочел использовать диспетчер состояний, например redux , для централизации выборки данных между различными компонентами.

В частности, вы создаете действия, выполняющие фактическую выборку данных, поэтому вы можете вызывать их внутриComponentDidMount крючки.

Посмотрите на эту статью: https://dev.to/markusclaus/fetching-data-from-an-api-using-reactredux-55ao