JS多个异步请求 按顺序执行next实现解析

在js里面，偶尔会遇见需要多个异步按照顺序执行请求，又不想多层嵌套，，这里和promise.all的区别在于，promise或者Jquery里面的$.when 是同时发送多个请求，一起返回，发出去的顺序是一起；这里是按照顺序发请求

首先创建一个迭代器，接收任意多个函数参数

function nextRegister(){
      var args = arguments;
      var count = 0;
      var comm = {};
      function nextTime(){
        count++;
        if(count < args.length){
          if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
            args[count](comm,nextTime);
          }
        }
      }
      if(args[count] && Object.prototype.toString.call(args[count]) == '[object Function]'){
        args[count](comm,nextTime);
      }
    }　

创建多个异步的函数，注入到迭代器中

/*
     comm:多个函数，公用的变量
     next:调用下一个函数
     * */
    function fn1(comm,next){
      console.log('1');
      comm.age = 20;
      next();
    }
    function fn2(comm,next){
      next();
      console.log('2');
      console.log(comm.age);
    }
    function fn3(comm,next){
      console.log('3');
    }
//开始执行迭代
nextRegister(fn1,fn2,fn3);

在这里，fn1-fn3函数中，做异步操作，知道在异步成功的时候调用next()就可以继续执行下一个函数，同时可以将前面函数返回的结果，绑定在comm上，带到下一个函数中

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生JS发送异步数据请求

    在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到原生JS进行异步数据请求.这时候无非有两种请求方式,一种是AJAX,另一个是JSONP.通过原生JS对异步请求进行简单的封装. AJAX AJAX是一种数据请求方式,不需要刷新整个页面就能够更新局部页面的数据.AJAX的技术核心是XMLHttpRequest对象,主要请求过程如下: 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystat

  • 详解Vuejs2.0之异步跨域请求

    详解Vuejs2.0之异步跨域请求

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了axios.接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等...) 首先我们来安装Vue-Cli开发模板(这个模板可以快速生成vuejs的运行配置环境,可以使新手快速免除配置搭建出运行界面),这里我使用cnpm命令,请自行百度配置. 打开命令窗口: cnpm install -g vue-cli 等待片刻,即可安装完毕. 然

  • JavaScript利用fetch实现异步请求的方法实例

    JavaScript利用fetch实现异步请求的方法实例

    前言 相信大家应该都有所了解,在这个AJAX时代,如果想进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求. 现在产生的 fetch 框架简直就是为了提供更加强大.高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求.下面话不多说,来一起看看详细的介绍吧. 先来看看各个浏览器对fetch的原生支持情况,可以看到支持性并不是很高,safari在10.1 之后才支持,ios更是10.

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • Node.js模拟发起http请求从异步转同步的5种用法

    使用 Node.js 模拟发起 http 请求很常用的,但是由于 Node 模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库 API 从异步转同步的几种方法.模块有: request , request-promise , request-promise-native , request-promise-any PS: Node的版本>=8.0.0 为了使用 Async / Await PS: 这里加入 auth 字段是为了需要用户

  • 原生JavaScript实现Ajax异步请求

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面. 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算. 所以接下来便用原生JavaScrpit实现一个简单的Ajax请求,并说明ajax请求中的跨域访问问题,以及多个ajax请求的数据同步问题. JavaScript实现Ajax异步请求 简单的ajax请求实现 Ajax请求的原理是创建一个XMLHttpReq

  • SpringMVC环境下实现的Ajax异步请求JSON格式数据

    SpringMVC环境下实现的Ajax异步请求JSON格式数据

    一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

  • angularjs 处理多个异步请求方法汇总

    在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) {         $http.get('url2').success(function (d2) {             //处理逻辑         });     }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang

  • JS多个异步请求 按顺序执行next实现解析

    在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺序是一起:这里是按照顺序发请求 首先创建一个迭代器,接收任意多个函数参数 function nextRegister(){ var args = arguments; var count = 0; var comm = {}; function nextTime(){ count++; if(cou

  • 浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考

    前言 最近需要做一个浏览器的, 支持大体积文件上传且要支持断点续传的上传组件, 本来以为很容易的事情, 结果碰到了一个有意思的问题: 循环执行连续的异步任务, 且后一个任务需要等待前一个任务的执行状态 这么说可能有点空泛, 以我做的组件举例: 这个组件本意是为了上传大体积视频, 和支持断点续传, 因为动辄几个G的视频不可能直接把文件读进内存, 只能分片发送(考虑到实际网络状态, 每次发送大小定在了4MB), 而且这么做也符合断点续传的思路. 组件工作流程如下: 选定上传文件后, 从H5原生upl

  • node.js多个异步过程中判断执行是否完成的解决方案

    前言 本文主要给大家介绍了关于node.js多个异步过程中判断执行是否完成的相关内容,可能这样说大家不是很明白,下面来一起看看详细的介绍吧. 场景: 想请求量较大的网络数据,比如想获取1000条结果,但数据处理速度慢,有超时的风险,可以分成10次处理,每次处理100条:所有请求完成后再统一进行处理. 这样的应用场景,可以这样处理: 方案一:判断请求到的数据条目 // 模拟网络请求 function fetch(url, callback) { setTimeout(function (){ ca

  • iOS当多个网络请求完成后执行下一步的方法详解

    前言 在开发中,我们很容易遇到这样的需求,需要我们同时做多个网络请求,所有网络请求都完成后才能进行下一步的操作. 网络请求的任务是提交给子线程异步处理了,网络请求这样的任务也就快速执行完毕了,但是网络请求是一个任务,处理收到的网络响应又是一个任务,注意不要把这两个过程混为一谈. 如下载多个图片,下载完了才能展示,今天我们就来研究一下这个问题的解决方案. 解决方法 1.首先,我们创建一个项目,然后做一般性的做法,不做任何处理去连续请求一个接口10次: 先在viewDidLoad中创建第一种情况.

  • headjs实现网站并行加载但顺序执行JS

    http://headjs.com/ 并行加载JS,但是执行的时候却按顺序执行,提高网站速度 <script src="js/head.min.js"></script> <script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_valida

  • js fetch异步请求使用实例详解

    js fetch异步请求使用实例详解

    目录 认识异步 fetch(url) response.json() 结合async和await 异常处理 post请求 总结 认识异步 首先我们得明白请求是一个异步的过程. 因为请求需要时间向服务器发送请求和接收请求结果. 我们得要等待请求完成然后执行请求完成后的回调,来对接收到的请求结果做处理. fetch(url) 为了方便学习,我们借用一下uni-app教程的api接口. const url = 'https://unidemo.dcloud.net.cn/api/news' 我们需要知

  • 浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    jQuery $(document).ready()执行顺序: 当页面DOM 元素全部加载完毕后就执行.ready().$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready()之前的javascript代码,然后执行.ready(). 多个$(document).ready()的执行顺序并非单纯的顺序执行,其与嵌套层级也有一定的关系.

  • 详解如何构建Promise队列实现异步函数顺序执行

    场景 有a.b.c三个异步任务,要求必须先执行a,再执行b,最后执行c 且下一次任务必须要拿到上一次任务执行的结果,才能做操作 思路 我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别) 大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行 解决 模拟3个异步函数 // 异步函数a var a = function () { return

  • js利用递归与promise 按顺序请求数据的方法

    问题:项目中有一个需求,一个tabBar下面如果没有内容就不让该tabBar显示,当然至于有没有内容,需要我们通过请求的来判断,但是由于请求是异步的,如何让请求按照tabBar的顺序进行? 方案:我们可以将promise变成下一个请求,可以利用递归来实现 实施: //定义初始数据 requestlist就像tabBar列表 let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9]; //每个tabBar的返回数据使用reslist装起来 let reslist =

随机推荐