React redux Thunk - 使用 fetch API 使用第一个 ajax 调用的结果使两个 ajax 调用一个接一个

Question

我正在尝试一个接一个地进行两次 ajax 调用，即根据第一次调用数据的结果，我正在进行第二次调用。我正在尝试使用 thunk，但它没有发生，我收到错误。

actions.js

const fetchedStateNameSucess = (json) => {
    return {
      type: 'FETCH_STATE_NAME_SUCCESS',
      json
    }
}

const fetchProvidersDetailsSuccess = (providersData) => {
    return {
      type: 'FETCH_PROVIDER_DETAILS_SUCCESS',
      providersData
    }
}


export const fetchProvidersDetails = (providerId) => {
 return (dispatch) => {
  const providerUrl = `http://someUrl`;
  const stateClientCountUrl = `http://someUrl/${state}`;
  fetch(providerUrl)
  .then(response => response.json())
  .then(json => dispatch(fetchProvidersDetailsSuccess(json)))
  .then((stateValue = json[0].stateVal)
  fetch(stateClientCountUrl)
    dispatch(fetchedStateNameSucess(response)));
  };
}

在上面的调用中，fetch(providerUrl)，我在获取 stateval 的地方得到响应，如何在第二次调用以 stateval 作为参数的 fetch(stateClientCountUrl) 时使用它。

Answer 1

如果要将第一次调用响应中的值用于第二次提取调用，则需要在第一次提取成功后进行第二次提取，大致如下所示：

export const fetchProvidersDetails = (providerId) => {
 return (dispatch) => {
  const providerUrl = `http://someUrl`;
  const stateClientCountUrl = `http://someUrl/${state}`;
  fetch(providerUrl)
  .then(response => response.json())
  .then(json => {
    dispatch(fetchProvidersDetailsSuccess(json));
    const stateValue = json[0].stateVal;
      fetch(stateClientCountUrl)
      .then(response => dispatch(fetchProvidersDetailsSuccess(response)));
    })
}

不要忘记在那里添加错误处理，包括 HTTP 状态代码和 JavaScript 错误（通过添加相应的 catch 子句）。

Answer 2

正如 Miguel 所说，您可以在 .then() 子句中执行第二个查询，也可以使用 async/await 语法，如下所示：

export const fetchProvidersDetails = providerId => {

 return async dispatch => {
  const providerUrl = `http://someUrl`;

  try {
       const response = await fetch(providerUrl);
       const json = await response.json();
       dispatch(fetchProvidersDetailsSuccess(json))

       const stateClientCountUrl = `http://someUrl/${json[0].stateVal}`;
       const response2 = await fetch(stateClientCountUrl);
       const json2 = await response2.json();
       dispatch(fetchedStateNameSucess(json2));
  } catch (error) {
       console.log('Error', error);
  }
}

React redux Thunk - 使用 fetch API 使用第一个 ajax 调用的结果使两个 ajax 调用一个接一个

React redux Thunk - Making two ajax call one after the other with the result from the first ajax call using fetch API

ajax

fetch

reactjs

redux

redux-thunk