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，如何使用它来进行第二次调用fetch（stateClientCountUrl），它将stateval作为参数。

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

2 个答案: