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    
      。。                 
  */