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

我试图一个接一个地进行两个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，如何在第二次调用fetch（stateClientCountUrl）时使用它，该调用将stateval作为参数。

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

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)));
    })
}

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);
  }
}

不要忘记在那里为HTTP状态代码和JavaScript错误添加错误处理（通过添加相应的

catch

子句）。

如前所述，您可以在

.then（）

子句中进行第二次查询，还可以使用

async/await

语法，如下所示：

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)));
    })
}

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);
  }
}

---

你能在这里粘贴准确的错误吗？我想你的代码中有一些拼写错误。试着复习和编辑你的问题。您多次分派同一动作创建者。