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实现串行请求的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:- html+css+javascript实现列表循环滚动示例代码
- JavaScript实现url地址自动检测并添加URL链接示例代码
- 使用$.getJSON实现跨域ajax请求示例代码
- 在Javascript(js)或Jquery中直接实现超链接跳转代码示例!
- JavaScript实现图片轮播组件代码示例
- 原生JavaScript代码实现 jsonp 跨域请求
- 实现年月日下拉菜单的javascript代码示例~
- 用JavaScript实现使用鼠标画线的示例代码
- JavaScript实现图片滑动切换的代码示例分享
- javascript请求servlet实现ajax示例(分享)
- JavaScript实现Ajax请求简单示例
- 用JavaScript实现类似于ListBox功能示例代码
- 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码
- JavaScript中实现Map的示例代码
- 原生JavaScript实现ajax异步请求代码
- JavaScript实现Ajax请求简单示例
- 转贴:JavaScript实现Ajax请求简单示例
- 实现年月日下拉菜单的javascript代码示例
- javascript 实现 ajax 示例代码----get方式
- javascript实现Emrips反质数枚举的示例代码