React中对异步Promise的介绍,以及使用场景介绍和案例列举

React中的异步怎么用,怎么才能优雅的在前端中使用异步呢?好了不卖关子了,下面的文字和代码你一定要坚持看完,保证你会完全明白的。

在java代码中使用异步的话,大家可以使用new Thread()创建线程,当然了也可以使用线程池进行异步的处理,但是如果是涉及到这种场景比如:当多个线程执行完毕后要汇总这几个线程的结果,当多个线程中有一个线程先执行完就直接返回这个线程的结果等等场景的时候使用new Thread()或者是使用线程池去做控制实现上述功能的话都会比较麻烦,这时候Java给提供了ComplateableFuture这个类,这就让异步操作起来简单很多,同理在React当中就给提供了Promise这个类,来完成类似ComplateableFuture的一些功能,下面我们详细说一下React中的Promise这个类型

Promise有三种状态
分别是:
1、pending 正在运行的状态
2、resolve Promise异步成功运行的时候执行 对应回去执行回调 then中的内容
3、reject Promise执行失败的时候会对应去回调执行catch中的内容。

看到这里不明白的话没关系,接着往下看。

如下图中的代码:
在这里插入图片描述
上图中的代码运行的时候,当点击 按钮 一定是先输出 topath02,再输出topath01

这时候加上 Promise 异步呢?
看代下边的代码:
在这里插入图片描述
上述代码这时候 就会先输出 topath01 ,再输出topath02,这就是Promise的异步操作。
通过上述的例子其实不难看出Promise的用途,其实主要是通过提供异步执行的能力来提升代码的运行效率
比如:当你的前端需要多次请求后台 那么就可以使用Promise 进行并行的执行对后台的多次请求从而提升程序的响应速度

下面接着来看:
如果Promise异步执行完毕需要有返回结果的时候怎么做呢?这时候就要用到 then 方法回调了
举例:
在这里插入图片描述
如果异步执行的时候出错了怎么办呢?这时候就要用到catch了
在这里插入图片描述
当多个异步的结果需要合并的时候怎么处理呢?(这个适用于比如需要同时请求后台的多个接口获取数据,或者是并行做多个操作的场景)
举例:
在这里插入图片描述
上述综合举例如下:
在这里插入图片描述
再看一些其他的场景:
Promise.any() 和Promise.race()的区别
Promise.any()需要传入一个 Promise的数组,只要有一个Promise实例执行完成就算是完成,所有的Promise实例执行失败才算执行失败
Promise.race() 需要传入一个 Promise的数组,最终的状态要看第一个执行完的Promise实例的状态是成功还是失败(换就换说就是最终的状态取决于第一个执行完的Promise实例的状态)

Promise.any()举例: 如果promise 和 promise2有一个执行成功就会执行Promise.any([]).then()
如果全部执行失败就会执行Promise.any([]).catch()
在这里插入图片描述
Promise.race()举例可以参照 Promise.any()的实例自行验证

好了,这一个知识点先分享这么多,大家有问题的话请留言,看到后会尽快回复

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值