promise 실행 순서 요약

면접 에서 만난 promise 의 집행 순서 문 제 는 여기 서 정리 하 겠 습 니 다.전에 블 로그 계 정 을 잊 어 버 려 서 새로 만 들 었 어 요.

  const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
  })
  promise.then(() => {
    console.log(4);
  })
  console.log(5);
  //      ： 1, 2, 5, 4
  //   ： promise          ， promise.then         。


  const promise = new Promise((resolve, reject) => {
    resolve('success1')
    reject('error')
    resolve('success2')
  })
  promise.then((res) => {
    console.log('then: ', res)
  }).catch((err) => {
    console.log('catch: ', err)
  })
  //     ： then: success1
  //   ：        resolve   reject          ，         
  //   。 promise            。
  // promise   3     ： pending、 fulfilled   rejected。
  //         pending - > fulfilled    pending - > rejected，
  //            。

  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('once')
      resolve('success')
    }, 1000)
  })

  const start = Date.now()
  promise.then((res) => {
    console.log(res, Date.now() - start)
  })
  promise.then((res) => {
    console.log(res, Date.now() - start)
  })
  //     ： once
  // success 1005
  // success 1007
  //   ： promise  .then   .catch        ，     Promise     
  //      。     promise         ，        ，      
  //    .then   .catch         。

  console.log('start');
  new Promise(function (resolve, reject) {
    setTimeout(function () { //       
      resolve('hello'); //  promise    then       
    }, 2000);
  }).then((value) => {
    console.log(value); //  resolve    
    return new Promise(function (resolve) { // then()      promise  ，       then
      setTimeout(function () {
        resolve('world'); //   promise   ，   then
      }, 3000)
    })
  }).then((value) => {
    console.log(value);
  })
  //    ：
  //        start
  //        hello
  //         world

5. 위 에서 우리 가 then () 함수 에서 돌아 온 것 은 새로운 promise 입 니 다. 만약 에 돌아 온 것 이 새로운 promise 가 아니라면 어떻게 되 겠 습 니까?여전히 위의 코드 입 니 다. 약간 수정 하 겠 습 니 다.

  console.log('start');
  new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve('hello');
    }, 2000);
  }).then((value) => {
    console.log(value);
    (function () {
      return new Promise(function (resolve) {
        setTimeout(function () {
          resolve('world');
        }, 3000)
      })
    })();
    return false;
  }).then((value) => {
    console.log(value);
  })
  /*
        ：
                start
                hello
                false
  */
  //            ，      then（）          promise，  
  // return      then     ，          return  false，    
  // then     value  false，   then   return，    return   undefined.

6. then () 에 포 함 된. then () 의 내장 상황 then () 의 내장 은 내부 의 then () 을 실행 한 다음 에 외부 then () 을 계속 실행 합 니 다.여러 then 끼 워 넣 을 때 펼 치 는 것 을 권장 합 니 다. then () 을 같은 단계 에 두 면 코드 가 더욱 선명 합 니 다.

console.log('start');
  new Promise((resolve, reject) => {
      setTimeout(function () {
        console.log('step');
        resolve(110);
      }, 1000)
    })
    .then((value) => {
      return new Promise((resolve, reject) => {
          setTimeout(function () {
            console.log('step1');
            resolve(value);
          }, 1000)
        })
        .then((value) => {
          console.log('step 1-1');
          return value;
        })
        .then((value) => {
          console.log('step 1-2');
          return value;
        })
    })
    .then((value) => {
      console.log(value);
      console.log('step 2');
    })
  /*
   start
   step
   step1
   step 1-1
   step 1-2
   110
   step 2
  */

  //       
  console.log('start');
  new Promise((resolve, reject) => {
      setTimeout(function () {
        console.log('step');
        resolve(110);
      }, 1000)
    })
    .then((value) => {
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          console.log('step1');
          resolve(value);
        }, 1000)
      })
    })
    .then((value) => {
      console.log('step 1-1');
      return value;
    })
    .then((value) => {
      console.log('step 1-2');
      return value;
    })
    .then((value) => {
      console.log(value);
      console.log('step 2');
    })

7. catch 와 then 의 연결 이 한 걸음 한 걸음 에 오류 가 발생 할 수 있다 면 catch 뒤에 then 을 연결 하 는 상황 이 발생 할 수 있 습 니 다.상위 코드

new Promise((resolve,reject)=>{
    resolve();
})
.then(value=>{
    console.log('done 1');
    throw new Error('done 1 error');
})
.catch(err=>{
    console.log('    1：'+err);
})
.then(value=>{
    console.log('done 2');
})
.catch(err=>{
    console.log('    2：'+err);
})
/*
 done 1
     1：Error: done 1 error
 done 2
   catch       then，catch       promise  
*/
new Promise((resolve,reject)=>{
    resolve();
})
.then(value=>{
    console.log('done 1');
    throw new Error('done 1 error');
})
.catch(err=>{
    console.log('    1：'+err);
    throw new Error('catch error');
})
.then(value=>{
    console.log('done 2');
})
.catch(err=>{
    console.log('    2：'+err);
})
/*
 done 1
     1：Error: done 1 error
     2：Error: catch error
    catch       ，    then          ，     
 promise     rejected 
*/

8. Promise. all () 은 여러 Promise 를 대량으로 실행 하고 모든 Promise 가 끝 난 후에 새로운 Promise 를 되 돌려 줍 니 다.

// 1、           
  // 2、       Promise  ，        ，   Promise        
  // 3、    Promise  ，   Promise  ，              Promise 
  //          
  // 4、      Promise  ，   Promise  ，           Promise   
  console.log('here we go');
  Promise.all([1, 2, 3])
    .then(all => {
      console.log('1: ' + all);
      return Promise.all([function () {
        console.log('ooxx');
      }, 'xxoo', false])
    })
    .then(all => {
      console.log('2: ' + all);
      let p1 = new Promise(resolve => {
        setTimeout(function () {
          resolve('I\'m p1');
        }, 1500)
      });
      let p2 = new Promise(resolve => {
        setTimeout(function () {
          resolve('I\'m p2');
        }, 2000)
      });
      return Promise.all([p1, p2]);
    })
    .then(all => {
      console.log('3: ' + all);
      let p1 = new Promise((resolve, reject) => {
        setTimeout(function () {
          resolve('P1');
        }, 1000)
      })
      let p2 = new Promise((resolve, reject) => {
        setTimeout(function () {
          reject('P2');
        }, 3000)
      })
      let p3 = new Promise((resolve, reject) => {
        setTimeout(function () {
          reject('P3');
        }, 2000)
      })
      return Promise.all([p1, p2, p3]);
    })
    .then(all => {
      console.log('all: ' + all);
    })
    .catch(err => {
      console.log('Catch:' + err);
    })
  /*
       here we go
       1: 1,2,3
       2: function(){
          console.log('ooxx');
          },xxoo,false
       3: I'm p1,I'm p2    
       Catch:P3      
               。
  */

9. Promise. race () 와 Promise. all () 의 차이 가 많 지 않 습 니 다. 차이 점 은 들 어 오 는 배열 중 하나의 Promise 가 완성 되면 전체 Promise 가 완 성 됩 니 다.

  let p1 = new Promise(resolve => {
    setTimeout(function () {
      resolve('p1');
    }, 10000);
  })
  let p2 = new Promise(resolve => {
    setTimeout(function () {
      resolve('p2');
    }, 1000);
  })
  Promise.race([p1, p2])
    .then((value) => {
      console.log(value);
    })
  /*
      p1     1s    
      。。                 
  */