javascript - 同时执行两个功能

Question

我有一个函数，可以在调用该函数时刷新组件的数据。目前它一次仅适用于一个组件。但我想一次刷新两个组件。这是我的刷新功能:

   fetchDataByName = name => {
        const { retrievedData } = this.state;
        const { fetcher } = this.props;
        const fetch = _.find(fetcher, { name });

        if (typeof fetch === "undefined") {
          throw new Error(`Fetch with ${name} cannot be found in fetcher`);
        }

        this.fetchData(fetch, (error, data) => {
          retrievedData[name] = data;
          this._isMounted && this.setState({ retrievedData });
        });
      };

我的函数是这样调用的:

refresh("meetingTypes");

它作为 Prop 传递给我的组件:

return (
        <Component
          {...retrievedData}
          {...componentProps}
          refresh={this.fetchDataByName}
        />
      );

我尝试将多个组件名称作为数组传递，如下所示:

const args = ['meetingTypes', 'exampleMeetingTypes'];
refresh(args);

然后检查我的 fetchDataByName 函数是否 name 是一个数组，并循环访问该数组以获取数据。但是该函数仍然是依次执行的，而不是同时执行的。所以我的问题是:

What would be the best way to implement this that it seems like the function is executed at once instead of first refreshing meetingTypes and then exampleMeetingTypes?

我应该使用async/await还是有更好的选择？

fetchData 函数:

fetchData = (fetch, callback) => {
    const { componentProps } = this.props;
    let { route, params = [] } = fetch;
    let fetchData = true;

    // if fetcher url contains params and the param can be found
    // in the component props, they should be replaced.
    _.each(params, param => {
      if (componentProps[param]) {
        route = route.replace(`:${param}`, componentProps[param]);
      } else {
        fetchData = false; // don't fetch data for this entry as the params are not given
      }
    });

    if (fetchData) {
      axios
        .get(route)
        .then(({ data }) => {
          if (this.isMounted) {
            callback(null, data);
          }
        })
        .catch(error => {
          if (error.response.status == 403) {
            this._isMounted && this.setState({ errorCode: 403 });
            setMessage({
              text: "Unauthorized",
              type: "error"
            });
          }

          if (error.response.status == 401) {
            this._isMounted && this.setState({ errorCode: 401 });
            window.location.href = "/login";
          }

          if (error.response.status != 403) {
            console.error("Your backend is failing.", error);
          }
          callback(error, null);
        });
    } else {
      callback(null, null);
    }
  };

Answer 1

我假设fetchData异步工作(ajax或类似)。要并行刷新数据的两个方面，只需进行两次调用而不是一次:

refresh("meetingTypes");
refresh("exampleMeetingTypes");

两个 ajax 调用或其他调用将并行运行，每个调用完成后都会更新组件。 但是:请参阅下面的“附注”，fetchDataByName 存在问题。

如果您想避免两次更新组件，则必须更新 fetchDataByName 以接受多个名称或返回结果的 promise (或类似结果)，而不是直接更新组件，因此调用者可以进行多次调用并在执行更新之前等待两个结果。

<小时/>

旁注:fetchDataByName 的这方面看起来很可疑:

fetchDataByName = name => {
  const { retrievedData } = this.state;  // <=============================
  const { fetcher } = this.props;
  const fetch = _.find(fetcher, { name });

  if (typeof fetch === "undefined") {
    throw new Error(`Fetch with ${name} cannot be found in fetcher`);
  }

  this.fetchData(fetch, (error, data) => {
    retrievedData[name] = data;          // <=============================
    this._isMounted && this.setState({ retrievedData });
  });
};

有两个问题:

1. 它直接更新存储在您的状态中的对象，这是您在 React 中绝对不能做的事情。
2. 它将整个 retrievedData 对象替换为可能已过时的对象。

相反:

fetchDataByName = name => {
  // *** No `retrievedData` here
  const { fetcher } = this.props;
  const fetch = _.find(fetcher, { name });

  if (typeof fetch === "undefined") {
    throw new Error(`Fetch with ${name} cannot be found in fetcher`);
  }

  this.fetchData(fetch, (error, data) => {
    if (this._isMounted) {                                  // ***
      this.setState(({retrievedData}) => (                  // ***
        { retrievedData: {...retrievedData, [name]: data} } // ***
      );                                                    // ***
    }                                                       // ***
  });
};

这会消除对象的就地突变，并通过 setState 的回调版本使用 retrievedData 的最新版本。