积跬步,至千里
精前端,通全栈

promise 与 async/await 来控制异步和超时问题

读懂文章需要掌握异步控制的两个技术点:

  • Promise
  • async/await

下边单独分开两个问题代码实践

一、超时问题需求背景

某接口请求响应超过指定时间(比如3秒)后,提示超时或者重新请求。或者走其他方式获取数据。

代码实现

提示:利用了Promise状态一旦发生变化,就无法再改变的特点

测试一下

我们来测试一下

在线运行:codepen.io在线代码

  • 当delay 时间 ms >= 接口响应时间时,结果正常

  • 当delay 时间 ms < 接口响应时间时,结果超时

二、异步控制问题背景

某接口,假设被限制每秒请求次数(qps等),QPS不了解推荐阅读:吞吐量(TPS)、QPS、并发数、响应时间(RT)概念。有个业务场景,是需要多次请求该接口(循环),但是要控制不能超过QPS,避免接口报错。代码如何控制好,如何更好的写出可维护的高效代码。

业务场景再举例:比如有100张图片,你需要调用百度的OCR接口去识别图片上的文字,但是百度的免费版接口指支持 2 QBS,你循环请求接口的时候就要控制每秒不能超过2次请求,不然会报错。

代码实现

全部代码见:client/ocr.js#L31

该业务控制通过封装一个延时执行的方法 timeout 实现的:

ms参数是延时时间,promise接受一个Promise对象。

解决多次循环异步提取图片文字的业务,可以看下边的代码:其中orcModule.execOrcByImgPath方法(异步的),通过 async/await 来控制同步编程,内部多次异步循环拿到所有的循环结果。最后 pdfPath 方法统一返回结果:

三、axios简单包装

做项目的时候,我们会直接采用一些被人封装好的module去实现接口请求,比如 axios 就不错,也比较流行。我们在使用的过程还可以进一步包装,如下代码简单Promise包装post请求,然后配合 async/await 来使用

总结

理解该段代码需要熟悉 async/await 语法糖的使用。请求超时该使用场景不多,主要场景是在对请求的一些封装处理,等待接口响应时间如果超时,重新发请求的情况。代码来源于sindresorhus/ky。另外OCR项目源码:giscafer/easyocr

赞(3) 打赏
未经允许不得转载:前端学堂 » promise 与 async/await 来控制异步和超时问题

讨论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端实战学习群 学以致用,进步更快

demo演示立即加入

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏