首页 > 其他分享 >react hooks中使用promise.all

react hooks中使用promise.all

时间:2023-08-27 13:35:58浏览次数:36  
标签:values return hooks await react promise firstResponse error const

useEffect(async () => {
    const getFirstResponse = async () => {
      try {
        return await axios.get('http://first-api', {
          params: { carId: id },
        });
      } catch (error) {
        return error;
      }
    };

    const firstResponse = await getFirstResponse();

    const getSecondResponse = async () => {
      try {
        return await axios.get('http://second-api', {
          params: { carName: firstResponse.data?.carName },
        });
      } catch (error) {
        return error;
      }
    };

    const secondResponse = await getSecondResponse();

    Promise.all([firstResponse, secondResponse])
      .then(function (values) {
        console.log(`values`, values);
      })
      .catch(function (err) {
        console.log(err);
      });

  }, []);

 

标签:values,return,hooks,await,react,promise,firstResponse,error,const
From: https://www.cnblogs.com/anna001/p/17660182.html

相关文章

  • react-pdf在部分iOS手机上加载pdf失败问题解决
    最近项目快结束了,测试提了一个bug,iOS手机上加载pdf一直在转圈,加载不出来内容。看到这个bug,在电脑上和安卓手机上没有问题,iOS手机中打开确实又问题,初步确定为app问题。我们的项目是集成在客户的app里的,可能是app内的WebView和Safari有一些差异导致的问题。首先直接在iOS手机上用a......
  • 前端React学习路径
    在当今的软件开发领域,React已经成为一种广泛使用的JavaScript库,用于构建用户界面。它由Facebook开发并维护,具有高效、灵活和可扩展等特点,适用于各种类型的应用程序开发。本文将介绍前端React的学习路径,包括基本概念、核心功能、组件进阶、路由和状态管理、构建实践等方面,并结合代码......
  • 一个支持丰富鼠标和触摸手势的 React 库
    点击上方“蓝字”关注我们吧!哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!UseGesture是一个支持丰富鼠标和触摸手势的React库。UseGesture可以将丰富的鼠标和事件绑定到任何组件或视图。通过接收到的数据,设置手势变得非常简单,而且通常只需要几行代码。安......
  • pdfjs-dist v2.11.338写个react demo
    app.jsximport'./App.css'import*aspdfjsfrom"pdfjs-dist";import"pdfjs-dist/web/pdf_viewer.css";import{useEffect,useRef,useState}from'react'import{PDFViewer,PDFLinkService,EventBus}from'p......
  • promise 并发请求-Promise.all()/Promise.allSettle()
    方法定义//request.js定义exportfunctionall(requests,callback){Promise.all(requests).then(params=>callback(params)).catch(error=>{console.error(error)})}exportfunctionallSettle(requests,callback){Promise.allSettl......
  • 创建web应用程序,React和Vue怎么选?
    React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持,代码库可以很大程度地扩展,允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝,可以解决你在开发阶段可能遇到的任何问题。毫无疑问,React是创建跨平台解决方案的最佳框架......
  • 2023 React 18 系统入门 进阶实战《欢乐购》
    课程下载——2023React18系统入门进阶实战《欢乐购》提取码:c61a 分享课程——React18系统入门进阶实战《欢乐购》,2023年新课,附源码。React主要的原理VirtualDOM虚拟DOM传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可......
  • react-player学习
    一个适用于react的视频插件—react-player说明文档转载说明:来源于npm库中的readme.md侵权删调试工具地址:https://cookpete.com/react-player1.可以自动播放2.可以实现画中画、倍速、可控播放等功能ReactPlayerAReactcomponentforplayinga......
  • vue3 和 react18 对比
    Vue3和React18是目前最新的版本,它们都是非常受欢迎的前端框架。下面是对Vue3和React18进行深度对比的一些关键点:组件模型:Vue3:Vue3采用了基于函数的组件模型,即使用setup函数来定义组件逻辑。这种方式更加直观和灵活,允许开发人员以更简洁的方式编写组件。React18:React18仍然......
  • [React Typescript] JSX.IntrinsicElements
    interfaceIntrinsicElements{//HTMLa:React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>,HTMLAnchorElement>;abbr:React.DetailedHTMLProps<React.HTMLAttributes<HTMLElemen......