JavaScript Serial 요청의 예제 코드

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 ) );
};

맵으로 여러 번 훑어볼 때, 초기 프로미스의 반환 값을 필터하고, 훑어볼 때, 마지막 프로미스를 수동으로 실행해야 합니다. 그렇지 않으면 다음과 같은 결과가 됩니다.
# 실행 결과
{}
{ 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.맵은 유사하지만 군더더기 밖에 없다
이상은 자바스크립트가 직렬 요청을 실현하는 예시 코드의 상세한 내용입니다. 자바스크립트가 직렬 요청을 실현하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!