返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中实现一个串型异步函数队列
  • 600
分享到

JS中实现一个串型异步函数队列

2024-04-02 19:04:59 600人浏览 独家记忆
摘要

目录背景通常解法async/await 串型请求for...of 解法需求一reduce 实现需求二递归实现背景 在日常业务开发中,总会遇到这种场景,有一串请求,下一个请求依赖上一个

背景

在日常业务开发中,总会遇到这种场景,有一串请求,下一个请求依赖上一个异步请求的结果,一般来说,我在处理这种需求的时候使用 async/await 。但是在某些情况(比如面试),可能需要提供更加高级的解决方案。

通常解法

async/await 串型请求

// 生成异步请求函数

function genAsyncTask(isSuccess, delay) {
  return (params) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        isSuccess ? resolve(params || 'success') : reject('error')
      }, delay)
    })
  }
}
// 异步请求
const asyncTask1 = genAsyncTask(true, 1000)
const asyncTask2 = genAsyncTask(true, 2000)
const asyncTask3 = genAsyncTask(true, 3000)


// 通常解法
;(async()=>{
let result1 = await asyncTask1('a')
let result2 = await asyncTask2(result1)
await asyncTask3(result2)
// ...
})()

for...of 解法

不依赖上次结果,只要求顺序执行时,注意和Promise.all()区别

const asyncTasks = [asyncTask3, asyncTask2, asyncTask1]
;(async()=>{
  for(task of asyncTasks){
    console.log(await task())
  }
})()
// 输出:success    3s之后
// 输出:success    再2s之后
// 输出:success    再1s之后

需求一

  • 实现 queuePromsies 方法
  • 入参为异步请求函数数组
  • 上个结果作为下个异步函数的入参

reduce 实现



function queuePromises(asyncTasks, initInput = 'initInput') {
  return asyncTasks.reduce(
    (preAsyncTask, curAsyncTask) =>
      preAsyncTask.then((result) => {
        return curAsyncTask(result)
      }),
    Promise.resolve(initInput)
  )
}



;(async () => {
  try {
    let result = await queuePromises([asyncTask1, asyncTask2, asyncTask3])
    console.log(result)
  } catch (error) {
    console.log('error', error)
  }
})()
// 输出:initInput

需求二

  • 实现 chainPromise 函数
  • 不使用 async / await 语法
  • 实现单个 promise 失败后重新执行的配置,即 promise 失败后允许继续尝试发送几次请求,重传次数用完则认为失败,进入 catch

递归实现

// 递归解法
function chainPromise(tasks, { limit } = { limit: 3 }) {
  const results = []
  let tryTimes = 1
  let index = 0

  function next() {
    const task = tasks[index]
    if (task) {
      return task().then(
        (result) => {
          tryTimes = 1
          index++
          results.push(result)
          return next()
        },
        (reason) => {
          if (tryTimes <= limit) {
            console.log('try!!!', tryTimes)
            tryTimes++
            return next()
          } else {
            throw new Error('limit more than 3')
          }
        }
      )
    } else {
      return Promise.resolve(results)
    }
  }
  return next()
}
chainPromise([asyncTask1, asyncTask2, asyncTask3]), {limit:3}]).then(console.log)
// [1000,2000,3000]

到此这篇关于js 中实现一个串型异步函数队列的文章就介绍到这了,更多相关JS串型异步函数队列内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS中实现一个串型异步函数队列

本文链接: https://lsjlt.com/news/165214.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS中实现一个串型异步函数队列
    目录背景通常解法async/await 串型请求for...of 解法需求一reduce 实现需求二递归实现背景 在日常业务开发中,总会遇到这种场景,有一串请求,下一个请求依赖上一个...
    99+
    2024-04-02
  • JS如何实现异步函数队列功能
    小编给大家分享一下JS如何实现异步函数队列功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:场景:做直播,会有入场消息...
    99+
    2024-04-02
  • JS怎么实现异步任务队列
    本篇内容主要讲解“JS怎么实现异步任务队列”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS怎么实现异步任务队列”吧!问题有个需求,需要实现一个异步任务队列,并...
    99+
    2024-04-02
  • JavaScript中怎么实现一个队列
    JavaScript中怎么实现一个队列,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.  队列数据结构如果你喜欢四处旅行,肯定在火...
    99+
    2024-04-02
  • 异步redis队列实现 数据入库的方法
    业务需求 app客户端向服务端接口发送来json 数据 每天 发一次 清空缓存后会再次发送 出问题之前业务逻辑: php 接口 首先将 json 转为数组 去重 在一张大表中插入不存在的数据 该用户已经存在...
    99+
    2024-04-02
  • Redis数据库队列怎么实现异步任务
    在Redis中实现异步任务可以通过Redis的列表数据结构来实现队列。下面是一种常见的实现方式: 生产者将需要执行的任务加入到Re...
    99+
    2024-04-22
    Redis
  • JavaScript中怎么实现一个队列数据结构
    这篇文章将为大家详细讲解有关JavaScript中怎么实现一个队列数据结构,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1.队列数据结构如果你喜欢旅行(像我...
    99+
    2024-04-02
  • Redis+Node.js如何实现一个能处理海量数据的异步任务队列系统
    这篇文章主要介绍了Redis+Node.js如何实现一个能处理海量数据的异步任务队列系统,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在最近...
    99+
    2024-04-02
  • Vuejs中怎么利用nextTick()实现异步更新队列
    Vuejs中怎么利用nextTick()实现异步更新队列,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。源码解析方法原型以及解析注释如下:var...
    99+
    2024-04-02
  • js如何实现一个isNaN函数
    这篇文章主要介绍了js如何实现一个isNaN函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。自己实现一个 isNaN 函数这里利用了 NaN 值的一个特性,即 NaN 是整...
    99+
    2023-06-27
  • 怎么在java中利用数组实现一个环形队列
    本篇文章为大家展示了怎么在java中利用数组实现一个环形队列,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Java是什么Java是一门面向对象编程语言,可以编写桌面应用程序、Web应用程序、分布式系...
    99+
    2023-06-14
  • C#中怎么实现一个异步传输字符串客户端
    这篇文章给大家介绍C#中怎么实现一个异步传输字符串客户端,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。C#异步传输字符串客户端的实现与服务端类似,我们首先对TcpClient进行一个简单的包装,使它的使用更加方便一些,...
    99+
    2023-06-17
  • Vue中怎么实现一个异步组件
    今天就跟大家聊聊有关Vue中怎么实现一个异步组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。index.html<!DOCTYPE ...
    99+
    2024-04-02
  • 如何在PHP开发中实现异步任务和消息队列?
    如何在PHP开发中实现异步任务和消息队列?随着互联网的高速发展,网站的访问量和数据处理量越来越大。为了提高用户体验和系统的稳定性,开发人员不得不考虑如何高效地处理大量的并发请求和耗时任务。异步任务和消息队列成为了解决这个问题的有效手段。异步...
    99+
    2023-11-03
    PHP编程 消息队列 异步任务
  • 如何在PostgreSQL中实现异步通知和消息队列功能
    在PostgreSQL中实现异步通知和消息队列功能可以通过使用触发器和通知功能来实现。 创建一个触发器,在需要发送通知的时候触发该...
    99+
    2024-04-02
  • 如何在PHP项目中实现一个队列场景
    本篇文章为大家展示了如何在PHP项目中实现一个队列场景,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。声明概念:资源管理器(resource manager):用来管理系统资源,是通向事务资源的途径。...
    99+
    2023-06-06
  • MySQL中怎么实现一个截取字符串函数
    MySQL中怎么实现一个截取字符串函数,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。  函数:  1、从左开始截取字符串  left...
    99+
    2024-04-02
  • vbs中怎么实现一个字符串分割函数
    这篇文章给大家介绍vbs中怎么实现一个字符串分割函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Function CutAndJoin(sSource, iLong, sJoiner)&...
    99+
    2023-06-08
  • C#中怎么实现一个截取字符串函数
    C#中怎么实现一个截取字符串函数,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。C#截取字符串函数实例://C#截取字符串函数  public...
    99+
    2023-06-17
  • C++中怎么实现一个字符串替换函数
    这篇文章将为大家详细讲解有关C++中怎么实现一个字符串替换函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。C++字符串替换函数代码如下:@brief 实现字符串替换 &...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作