什麽是Promise

Promise是異步編程的一種解決方案，它有三種狀態，分別是pending-進行中、resolved-已完成、rejected-已失敗

當Promise的狀態又pending轉變為resolved或rejected時，會執行相應的方法，並且狀態一旦改變，就無法再次改變狀態，這也是它名字promise-承諾的由來

直接上案例了，在案例中理解：

最簡單的promise

new Promise(resolve =>{
  setTimeout(()=>{
    resolve(‘hello‘)
  },2000);
}).then(value=>{
  console.log(value 
 
+ ‘world‘);
})

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘);
  }, 2000);
})
  .then(value => {
    console.log(value);
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(‘world‘);
      }, 2000)
    });
  })
  .then(value 
 
=> {
    console.log(value + ‘ world‘);
  });

  // 結果
    // start
    // hello (2s)
   // worldworld (4s)

console.log(‘start‘);

let promise = new Promise(resolve=>{
  setTimeout(()=>{
    console.log(‘this promise fullfilled‘);
    resolve(‘hello,world‘)
  },2000);
});

setTimeout(()
 
=>{
  promise.then(value=>{
    console.log(value);
  })
},4000)

// 結果
  // start
  // this promise fullfilled  （2s）
  // hello,world    (4s)

  //在任何地方生成一個promise後，可以存為一個變量，不管該promise有完成，都會依次根據隊列執行

console.log(‘start‘);
new Promise(resolve => {
  setTimeout(() => {
    resolve(‘hello‘)
  }, 2000);
})
  .then(value => {
    console.log(value);
    (function () {
      return new Promise(resolve => {
        setTimeout(() => {
          console.log(‘第二個promise‘);
          resolve(‘Merry‘)
        }, 2000);
      })
    }());
    return false;
  })
  .then(value => {
    console.log(value + ‘world‘);
  })


  // 結果
    // start 
    // hello  （2s）
    // falseworld (2s)
    // 第二個promise (4s)

      //.then() 的函數裏面不返回新的 Promise,會默認執行下一個環節，即使你直接返回了false，也會執行

  // 備註
    // 匿名函數，(function(){})();立即執行,主要利用函數內的變量作用域，避免產生全局變量，影響整體頁面環境，增加代碼的兼容性。

new Promise(resolve => {
  console.log(‘start‘);
  setTimeout(() => {
    console.log(‘1‘);
    resolve(‘1‘);
  }, 1000)
})
  .then(value => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(‘1-1‘);
        resolve(‘1-1‘);
      }, 1000)
    })
      .then(value => {
        console.log(‘1-2‘);
        return value;
      })
      .then(value => {
        console.log(‘1-3‘);
        return value;
      })
  })
  .then(value => {
    console.log(‘2‘);
  })

/*
  結果：
    start
    1
    1-1
    1-2
    1-3
    2
*/

console.log(‘go‘);
new Promise((resolve,reject)=>{
  setTimeout(()=>{
    reject(‘bye‘)
    // throw new Error(‘bye‘);
  },1000)
})
  .then(value=>{
    console.log(value+‘world‘);
  })
  .catch(error=>{
    console.log(‘error:‘,error);
  })

  // go
  // error: bye

console.log(‘go‘);
new Promise(resolve=>{
  setTimeout(() => {
    resolve(‘‘);
  }, 1000);
})
  .then(()=>{
    console.log(‘start‘)
    throw new Error(‘test error‘);   
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);
    
    // 下面一行代碼的註釋講引發不同的走向
    throw new Error(‘another error‘);  
  })
  .then(()=>{
    console.log(‘arrive here‘);
  })
  .then(()=>{
    console.log(‘and here‘);
  })
  .catch((err)=>{
    console.log(‘I catch:‘+ err);
  })

/*
  結果一：
    go
    start
    I catch:Error: test error
    arrive here
    and here
  結果二：
    go
    start
    I catch:Error: test error
    I catch:Error: another error

*/ 

console.log(‘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(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P2‘);
    }, 3000);
  });
  return Promise.all([p1,p2]);
})
.then(all =>{
  console.log(‘3:‘,all);
  let p1 = new Promise(resolve=>{
    setTimeout(() => {
      resolve(‘I`m P1‘);
    }, 1000);
  });
  let p2 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P2‘);
    }, 1000);
  });
  let p3 = new Promise((resolve,reject)=>{
    setTimeout(() => {
      reject(‘I`m P3‘);
    }, 1500);
  });
  return Promise.all([p1,p2,p3]);
})
.then(all=>{
  console.log(‘all:‘,all);
})
.catch(err=>{
  console.log(‘catch‘,err);
  
})

/*
  結果：
  go 
  1: [ 1, 2, 3 ] 
  2: [ [Function], ‘xxoo‘, false ]
  3: [ ‘I`m P1‘, ‘I`m P2‘ ]   
  catch I`m P2
*/ 

promise學習總結