Javascript 从React中的服务器获取数据的全局服务

我有一些数据服务要添加到我的应用程序中。我希望这些服务可以在少数组件中使用，并且避免在每个组件中重写“获取函数”。 在对从服务器获取数据和异步调用行为（如）进行了一些研究之后，我意识到从这些调用返回数据并不容易，唯一的方法是在回调内部执行相关的执行

所以我得到了这个解决方案- 这很有效，但我的问题是：这是有问题的解决方案吗？

数据服务：

static getDataTry2（路径，obj）{
获取（路径）
.then（myResponse=>myResponse.json（））
。然后（arrivedData=>{
log（“到达的数据”，arrivedData）
对象状态({
try1：到达
});
});
}

我的其他组件：

componentDidMount() {

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


    }

---

我宁愿使用状态管理器来集中跨不同组件的数据获取

具体地说，您可以创建执行实际数据获取的操作，以便在

ComponentDidMount

钩子中调用它们

---

看看这篇文章：

我宁愿使用状态管理器来集中跨不同组件的数据获取

具体地说，您可以创建执行实际数据获取的操作，以便在

ComponentDidMount

钩子中调用它们

---

看看这篇文章：

提出请求抽象是一个标准的解决方案，但是为了分离关注点，您的服务应该能够提出请求，但它应该返回一个承诺，该承诺将由调用方管理

通常，请求抽象还管理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);
}

使用，无论您想在哪里（也在范围之外）：

---

进行请求抽象是一个标准的解决方案，但是为了分离关注点，您的服务应该能够进行请求，但是它应该返回一个将由调用方管理的承诺

通常，请求抽象还管理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);
}

使用，无论您想在哪里（也在范围之外）：

---

如果创建单独的服务并导入到当前组件中。这没有问题。您可以在componentDidMount方法下获取服务。如果您创建单独的服务并导入到当前组件中，它将工作。这没有问题。您可以使用componentDidMount方法获取服务。它将工作于@MosèRaguzzini Redux不应该处理此问题？@lingar Redux管理全局状态。您不需要它来提出请求。另外，要在操作中管理请求，您需要一个抽象。“我希望这些服务可以在少数组件中使用，并且避免重写“获取函数”。Redux是一个解决方案，而不是解决方案。@Michele这取决于他正在构建的应用程序。如果它管理ephimeral数据，或者它是一个微型应用程序，那么Redux可能是一个开销。此外，当您必须编写testsI agree时，thunks的使用可能会有问题。后者可以通过redux传奇解决，看看吧。那么@MosèRaguzzini redux不应该处理这个问题吗？@lingar redux管理全局状态。您不需要它来提出请求。另外，要在操作中管理请求，您需要一个抽象。“我希望这些服务可以在少数组件中使用，并且避免重写“获取函数”。Redux是一个解决方案，而不是解决方案。@Michele这取决于他正在构建的应用程序。如果它管理ephimeral数据，或者它是一个微型应用程序，那么Redux可能是一个开销。此外，当您必须编写testsI agree时，thunks的使用可能会有问题。后者可以通过redux传奇解决，看看吧。

import MyEndpointService from '/API/MyEndpointService'

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