首页
学习
活动
专区
圈层
工具
发布

如何在redux action中调用两个API,其中一个API调用依赖于另一个API的返回内容?

在redux action中调用两个API,其中一个API调用依赖于另一个API的返回内容,可以通过以下步骤实现:

  1. 创建两个异步的action creator函数,分别用于调用两个API。例如,一个叫做fetchData1,另一个叫做fetchData2
  2. fetchData1中,首先发起第一个API的请求,并在请求成功后,将返回的数据作为参数传递给fetchData2
代码语言:txt
复制
export const fetchData1 = () => {
  return async (dispatch) => {
    try {
      const response = await fetch('API1_URL');
      const data = await response.json();
      
      // 调用fetchData2,并将API1的返回数据作为参数传递
      dispatch(fetchData2(data));
    } catch (error) {
      // 处理错误
    }
  };
};
  1. fetchData2中,接收API1的返回数据作为参数,并发起第二个API的请求。
代码语言:txt
复制
export const fetchData2 = (data1) => {
  return async (dispatch) => {
    try {
      // 根据API1的返回数据,构造第二个API的请求参数
      const params = {
        data1,
      };
      
      const response = await fetch('API2_URL', {
        method: 'POST',
        body: JSON.stringify(params),
      });
      const data = await response.json();
      
      // 处理第二个API的返回数据
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      // 处理错误
    }
  };
};
  1. 在组件中,调用fetchData1来触发整个流程。
代码语言:txt
复制
import { connect } from 'react-redux';
import { fetchData1 } from 'actions';

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData1();
  }
  
  // ...
}

export default connect(null, { fetchData1 })(MyComponent);

这样,当组件挂载时,fetchData1会被调用,然后依次调用两个API,并将第一个API的返回数据传递给第二个API。最终,第二个API的返回数据会被存储到redux store中,可以在组件中通过props获取并使用。

相关搜索:在redux中API调用成功后是否调用另一个操作?如何进行依赖于另一个调用设置的值的API调用?Api调用:调用一个列表的键和值,然后在另一个API调用中循环获取值从flask中的另一个API多次调用同一个API如何在一个类中调用两个api以使两个api都工作?(React)如何在同一个类中的另一个api内部调用python api方法?如何在android中编写只返回布尔值作为响应的API的API调用?从一个API调用中生成一个数字,然后将返回的数字用作另一个API调用中的参数如何在另一个应用程序中挂钩api调用在我的redux saga中异步调用两个api,其中我需要来自第一个响应的数据来调用第二个api传递两个Action<T>参数,并根据异步API调用的JSON结果执行其中一个参数如何在NodeJS中对MongoDB的Post API调用返回成功随用户请求一起从python中的另一个API调用多个API在spring boot应用程序中从自己的rest api调用另一个rest apiYouTube Data API search中的“items”元素在调用“/videos”时不返回任何内容。如果两个API使用不同的身份提供者,如何使用oauth2调用另一个API?如何在单击formik表单中的保存按钮时组织两个api调用通过管道使用另一个API调用处理NgRx效果中的数据如何在redux saga中从一个不知道其大小的数组中进行连续的api调用?Redux-Saga: UI阻塞,直到api调用返回api请求块。我们如何在不阻塞ui的情况下实现这一点?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的文章

领券