|
短视频，自媒体，达人种草一站处事
这篇文章首要先容了JavaScript实现串行哀求的示例代码，辅佐各人更好的领略和行使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相同，就不外多赘述 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
