JavaScript实现串行请求的示例代码

使用async和await

var fn = async function(promiseArr) {
 for(let i = 0,len = arr.length; i<len; i++) {
  currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]);
  var result = await currentPromise;
  console.log(result)
 }
 }
 fn(arr)

Promise实现

依照 promises 规范,一旦一个 promise 被创建,它就被执行了。如果then方法里返回的是一个promise对象,那么执行下一个then 的时候必定是在上一个then执行完之后执行。

关键点在于then的时候再创建

var createPromise = function(time) {
 return (resolve, reject)=> {
  return new Promise((resolve, reject)=>{
   setTimeout(()=>{
    console.log('timein'+time)
    resolve();
   }, time*1000)
  })
 }
}

function serpromise(arr) {
 arr.reduce((pre, next, index, carr)=>{
  return pre.then(next)
 }, Promise.resolve())
}

var arr=[createPromise(2),createPromise(1),createPromise(3),createPromise(4),createPromise(5)];
// 相当于
// Promise.resolve().then(createPromise(2)).then(createPromise(1))......
serpromise(arr)

Array.prototype.reduce + async/await 版本

const reduceAsync = ( arr ) => {
 arr.reduce( async ( prev, curr ) => {
  const { rep } = await prev;
  const obj = await promise( curr, rep );
  console.log( obj );
  return obj;
 }, Promise.resolve( {} ) );
};

Array.prototype.reduce + Promise 版本

const reducePromise = ( arr ) => {
 arr.reduce( ( prev, curr ) => {
  return prev.then( data => {
   return new Promise( ( resolve, reject ) => {
    promise( curr, data.rep ).then( res => {
     console.log( res );
     resolve( res );
    } );
   } );
  } );
 }, Promise.resolve( {} ) );
};

# 执行结果
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }
{ req: 'PM:04:49:17', rep: 'PM:04:49:20', item: 4 }

Array.prototype.map + Promise 版本

const mapPromise = ( arr ) => {
 let temporary = Promise.resolve( {} );
 arr.map( ( item, index ) => {
  temporary = temporary.then( ( data ) => {
   if (i !== 0) {
    // 第一个初始promise
    console.log( data );
   }
   return promise( item, data.rep );
  } );
 } );
 // 最后一个promise
 temporary.then( data => console.log( data ) );
};

用 map 遍历时,需要过滤初始promise的返回值,并且在遍历结束后,需手动执行最后以后一个promise,否则就会变成如下结果

# 执行结果
{}
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }

以上结果明显不是我们所需要的,但是需要手动过滤第一个promise和执行最后一个promise,会增项不必要的代码量和出错率 后将 mapPromise 修改如下,其原理和Array.prototype.reduce+Promise版本类似

const mapPromise = ( arr ) => {
 let temporary = Promise.resolve( {} );
 arr.map( ( item, index ) => {
  temporary = temporary.then( ( data ) => {
   // if (i !== 0) {
   //  // 第一个promise
   //  console.log( data );
   // }
   return new Promise( ( resolve, reject ) => {
    promise( item, data.rep ).then( data => {
     console.log( data );
     resolve( data );
    } );
   } );
  } );
 } );
 // 最后一个promise
 // temporary.then( d => console.log( d ) );
};

其他

Array.prototype.forEach、Array.prototype.filter、Array.prototype.some、Array.prototype.every等方法和Array.prototype.map类似,就不过多赘述

以上就是JavaScript实现串行请求的示例代码的详细内容,更多关于JavaScript实现串行请求的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解Node.js串行化流程控制

    串行任务:需要一个接着一个坐的任务叫做串行任务. 可以使用回调的方式让几个异步任务按顺序执行,但如果任务过多,必须组织一下,否则过多的回调嵌套会把代码搞得很乱. 为了用串行化流程控制让几个异步任务按顺序执行,需要先把这些任务按预期的执行顺序放到一个数组中,这个数组将起到队列的作用:完成一个任务后按顺序从数组中取出下一个. 数组中的每个任务都是一个函数.任务完成后应该调用一个处理器函数,告诉它错误状态和结果. 为了演示如何实现串行化流程控制,我们准备做个小程序,让它从一个随机选择的RSS预定源中获

  • Nodejs中怎么实现函数的串行执行

    nodejs实现函数串行执行 众所周知,nodejs是用非阻塞异步io机制,也就是说函数执行完成的先后顺序和代码的编写的先后顺序可能不同,实际的顺序取决于一个函数自身执行的快慢.这就出现一个在nodejs中怎么编写串行执行也就是顺序执行代码的问题.试想,要是你写了2个函数,一个查询数据库,另一个返回查询的结果,要是不用串行执行那么还没等数据库查询完毕就返回了结果,这显然是不行的.因而串行执行在nodejs中很有用.那么怎么实现呢? 大家可能会说,将返回查询结果的函数写在查询数据库函数的回调函数里

  • JavaScript实现串行请求的示例代码

    使用async和await var fn = async function(promiseArr) { for(let i = 0,len = arr.length; i<len; i++) { currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]); var result = await currentPromise; console.log(res

  • NodeJS收发GET和POST请求的示例代码

    本文介绍了NodeJS收发GET和POST请求的示例代码,分享给大家,也给自己留个笔记 一 express框架接收 app.get('/',function(req,res) { var url = req.query.url; var name = req.query.name; console.log(url, name); }); 二 接收Get 1. get参数在req.url上 2. 使用url.parse将数据由字符串转变为obj index.js: var http = requi

  • Nginx限制某个IP同一时间段的访问次数和请求数示例代码

    nginx可以通过ngx_http_limit_conn_module和ngx_http_limit_req_module配置来限制ip在同一时间段的访问次数. ngx_http_limit_conn_module:该模块用于限制每个定义的密钥的连接数,特别是单个IP​​地址的连接数.使用limit_conn_zone和limit_conn指令. ngx_http_limit_req_module:用于限制每一个定义的密钥的请求的处理速率,特别是从一个单一的IP地址的请求的处理速率.使用"泄漏桶

  • 原生JavaScript实现滑动拖动验证的示例代码

    本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里 看到完整的源码. 原生实现 原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML

  • pandas实现按行选择的示例代码

    目录 1.自定义行索引 2. 按普通索引选择数据 2.1 按普通索引选择单行数据 2.2 按行索引选择多行数据 3.按位置索引选择数据 3.2 按位置索引选择多行数据 4.选择连续多行数据 5.选择满足条件的行 5.1单个条件选择 5.2 多个条件选择 5.2.1 多个条件是且的关系 5.2.2 多个条件是或的关系 本文所用到的Excel表格内容如下: 1.自定义行索引 dataframe读取Excel表格时是由自定义行索引的.这里为了展示效果,先进行自定义行索引的操作 import panda

  • 使用JavaScript制作待办事项列表的示例代码

    目录 JavaScript待办事项列表 如何制作JavaScript待办事项列表 第 1 步: 项目的基本结构 第 2 步: 使用 HTML 创建一个输入位置 第 3 步: 制作查看 Todo 文本的列表 第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表 我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.

  • JavaScript实现网页视频添加水印的示例代码

    目录 示例图 原理 代码示例 示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-Type" content=&quo

  • Golang发送http GET请求的示例代码

    使用标准库http来实现 package tools import ( "io/ioutil" "net/http" ) func Get(url string)string{ res, err :=http.Get(url) if err != nil { return "" } robots, err := ioutil.ReadAll(res.Body) res.Body.Close() if err != nil { return &qu

  • JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • JavaScript实现导入导出excel的示例代码

    目录 Excel导入 html代码 js代码 Excel导出 html代码 js代码 Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} > 导入 </button> <input id="upFile" type="file" style={{

随机推荐