[ JS个人笔记 ] Promise —DAY9

Promise 是用来优化非同步的语法。

• • Promise 物件状态
    • pending: 初始状态
    • fulfilled: 操作成功
    • rejected: 操作失败
• Promise 事件成功或失败所对应的方法
  • resolve(): 传送成功的讯息
  • reject(): 传送失败的讯息
• 状态连接处理
  • then(): 接收 resolve 的讯息
  • catch(): 接收 reject 的讯息
• 其他方法
  • Promise.race():
    • 传入多个 promise 事件，仅会回传第一个完成的事件(不论成功与否，只要完成即回传)
    • 任何一事件完成就会进入下一阶段，第一个事件完成後其他事件依旧执行，并不停摆
  • Promise.all():
    • 传入多个 promise 事件，在全部完成後才进行下一步
    • 只要有任一 promise 事件 reject，立即回传 rejected 状态 promise 物件
    • 若事件都成功，会回传阵列

程序基本架构

let factor = true   //非同步事件的成功与否
let condition = function(something) {
   return new Promise(function (resolve, reject) {
     if(something) {
         resolve("成功了");
     } else {
         reject('失败QQ');
     }
   });
}
//-----------------------可简写成以下------------------------
/*
let condition = function(something) {
     if(something) {
        return  Promise.resolve("成功了");
     } else {
        return Promise.reject('失败QQ');
     }
   }
*/
//----------------------------------------------------------
condition(factor)
.then(function(val) {
   console.log(val);
})
.catch(function(err) {
   console.log(err);
});

Promise Chain

• 当要依序处理非同步事件时，使用 .then 串接，并在最尾端接上 .catch
• 若其中一次失败，.catch只会接到第一个失败的讯息，而後不继续执行。若是要跳过错误继续执行，则将 Promise.reject 前的 return 去除，即可

let factor = true   //非同步的事件成功与否
let factor2 = false


let condition = function(something,num) {
     if(something) {
        return  Promise.resolve('第'+ num +"次成功了");
     } else {
        return Promise.reject('第'+ num +'次失败QQ');
     }
}

condition(factor,1)
.then(function(val) {
   console.log('1.'+val);
   return condition(factor2,2)
})
.then(function(val) {
   console.log('2.'+val);
   return condition(factor,3)
})
.then(function(val) {
   console.log('3.'+val);
   return condition(factor,4)
})
.then(function(val) {
   console.log('4.'+val);
})
.catch(error => console.log('错误讯息', error))

Promise.race()范例

let factor = true   //非同步的事件成功与否
let factor2 = false

let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了");
     } else {
         reject('第'+ num +'次失败QQ');
     }
   },Math.floor(Math.random() * 10)*1000)
 })
}

Promise.race([condition(factor2,1),condition(factor,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});

Promise.all()范例

//------------------------皆为成功的前提下--------------------------

let factor = true   //非同步的事件成功与否
let factor2 = false
let timer = Math.floor(Math.random() * 5)*1000
let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了花了"+timer+'秒');
     } else {
         reject('第'+ num +'次失败QQ');
     }
   },timer)
 })
}

Promise.all([condition(factor,1),condition(factor,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});

//-------------------------------其中一个失败状况下--------------------

let factor = true   //非同步的事件成功与否
let factor2 = false
let timer = Math.floor(Math.random() * 5)*1000
let condition = function(something,num) {
 return new Promise((resolve,reject)=>{
   setTimeout(function(){
     if(something) {
         resolve('第'+ num +".先成功了花了"+timer+'秒');
     } else {
         reject('第'+ num +'次失败QQ');
     }
   },timer)
 })
}

Promise.all([condition(factor,1),condition(factor2,2),condition(factor,3)])
.then((res)=>{
 console.log(res)
 }
).catch(err => {
 console.log(err)
});