(1)：promise對(duì)象

 什么是promsie,promise字面就是承諾，承諾一段時(shí)間做出回應(yīng)

 promise產(chǎn)生的歷史原因，回調(diào)函數(shù)的層層嵌套的回調(diào)"地獄"，不夠優(yōu)雅和易用

 promise的三種狀態(tài) pending fulfilled reject

 promise的特點(diǎn)
 promise的狀態(tài)不可逆，要么是成功要么是失敗，當(dāng)處于pending狀態(tài)，未知是成功還是失敗
 promise的結(jié)果必須通過(guò)回調(diào)函數(shù)返回出去，不然就會(huì)處于pending未知狀態(tài)
 promise對(duì)象的狀態(tài)不受外界影響。

(2)： new Promise對(duì)象

let p = new Promise((resolve,reject)=>{
  setTimeout(() => {
    // resolve("success-1")
    reject("err-0")
  }, 3000);
})

p.then(res=>{
  console.log(res);

//   錯(cuò)誤捕捉的第一種寫(xiě)法
// },error=>{  
//   console.log("error",error)
// })
  // 錯(cuò)誤捕捉的第二種寫(xiě)法
}).catch(err=>{
  console.log(err);
})

(3): Promise.resolve

let p = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve("success-1")
    // reject("err-0")
  }, 3000);
})


let p1 = p.then(res=>{
  console.log(res);
  return res
}).catch(err=>{
  console.log(err);
})


let p2 = p1.then(res=>{
  console.log("p1-res",res); //p1-res success-1
  // return new Promise((resolve,reject)=>{
  //   resolve(res)
  // })
  // 當(dāng)然也可以這樣簡(jiǎn)寫(xiě)
 // return Promise.resolve(res) 
 // 當(dāng)然也可以這樣
 return res
})


p2.then(res=>{
  console.log("p2-res",res); // p2-res success-1
})

(4)：promise.all

let p = new Promise((resolve,reject)=>{
  setTimeout(() => {
    // resolve("success-1")
    reject("err-0")
  }, 3000);
})

p.then(res=>{
  console.log(res);

//   錯(cuò)誤捕捉的第一種寫(xiě)法
// },error=>{  
//   console.log("error",error)
// })
  // 錯(cuò)誤捕捉的第二種寫(xiě)法
}).catch(err=>{
  console.log(err);
})

// promsie.all 處理并發(fā)請(qǐng)求

let p1 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(11)
  }, 1000);
})

let p2 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(22)
  }, 1000);
})

let p3 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    reject(33)
  }, 1000);
})

let p4 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(44)
  }, 1000);
})
let arr = [p1,p2,p3,p4]
Promise.all(arr).then(res=>{ // 對(duì)于有一個(gè)報(bào)錯(cuò)，只會(huì)返回當(dāng)前對(duì)應(yīng)的隊(duì)列的promise的錯(cuò)誤消息
  console.log("res===",res)
}).catch(err=>{
  console.log("err===",err); // 33 
})

• 很顯然我們想要所有的結(jié)果(不管是成功還是失敗),那么如何解決promise.all的錯(cuò)誤造成其它promise不執(zhí)行
  <font color="#f60">1: 批量處理promiseAll錯(cuò)誤</font>

// 批量處理promsie錯(cuò)誤、
async function watchPromiseError(p) {
  try {
    console.log("p",p);
    const data = await p;
    return {
      err:0,
      res: data
    }
  } catch (error) {
    return {
      err: 1,
      res:error
    }
  }
}
let arr = [p1,p2,p3,p4]
Promise.all(arr.map(item=>watchPromiseError(item))).then(res=>{ // 對(duì)于有一個(gè)報(bào)錯(cuò)，只會(huì)返回當(dāng)前對(duì)應(yīng)的隊(duì)列的promise的錯(cuò)誤消息
  console.log("res===",res) 
  /*   { err: 0, res: 11 },
  { err: 0, res: 22 },
  { err: 1, res: 33 },
  { err: 0, res: 44 } */
}).catch(err=>{
  console.log("err===",err); // 33 
})

<font color="#f60">2: 批量處理promiseAll錯(cuò)誤</font>

let arr = [p1,p2,p3,p4]
Promise.allSettled(arr).then(res=>{ // 對(duì)于有一個(gè)報(bào)錯(cuò)，只會(huì)返回當(dāng)前對(duì)應(yīng)的隊(duì)列的promise的錯(cuò)誤消息
  console.log("res===",res) 
  /*    { status: 'fulfilled', value: 11 },
  { status: 'fulfilled', value: 22 },
  { status: 'rejected', reason: 33 },
  { status: 'fulfilled', value: 44 } */
}).catch(err=>{
  console.log("err===",err); // 33 
})

(5)：promise.race

• <font color="#f60">race顧名思義就是賽跑的意思，誰(shuí)快執(zhí)行誰(shuí)</font>

let p1 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(11)
  }, 1000);
})

let p2 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(22)
  }, 1000);
})

let p3 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    reject(33)
  }, 1000);
})

let p4 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(44)
  }, 1000);
})

let arr = [p1,p2,p3,p4]
Promise.race(arr).then(res=>{
  console.log("res===",res) // 22
}).catch(err=>{
  console.log("err===",err); 
})

在這里插入圖片描述

• <font color="#f60">那么我們給p1改為2秒</font>

let p1 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    resolve(11)
  }, 2000);
})

在這里插入圖片描述

• <font color="#f60">對(duì)于報(bào)錯(cuò)呢race怎么處理，是不是也是只返回執(zhí)行最快的那個(gè)promise對(duì)象錯(cuò)誤消息呢</font>
• <font color="#f60">我們把p1改為reject</font>

let p1 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    reject(11)
  }, 1000);
})

在這里插入圖片描述

（5): 面試官你TM會(huì)promise，倒是就手寫(xiě)一個(gè)啊

class MyPromise {
  constructor(executor) {
    // 規(guī)定狀態(tài)
    this.state = "pending"
    // 保存 `resolve(res)` 的res值
    this.value = undefined
    // 保存 `reject(err)` 的err值
    this.reason = undefined
    // 成功存放的數(shù)組
    this.successCB = []
    // 失敗存放的數(shù)組
    this.failCB = []


    let resolve = (value) => {
      if (this.state === "pending") {
        this.state = "fulfilled"
        this.value = value
        this.successCB.forEach(f => f())
      }
    }
    let reject = (reason) => {
      if (this.state === "pending") {
        this.state = "rejected"
        this.value = value
        this.failCB.forEach(f => f())
      }
    }

    try {
      // 執(zhí)行
      executor(resolve, reject)
    } catch (error) {
      // 若出錯(cuò)，直接調(diào)用reject
      reject(error)
    }
  }
  then(onFulfilled, onRejected) {
    if (this.state === "fulfilled") {
      onFulfilled(this.value)
    }
    if (this.state === "rejected") {
      onRejected(this.value)
    }
    if (this.state === "pending") {
      this.successCB.push(() => { onFulfilled(this.value) })
      this.failCB.push(() => { onRejected(this.reason) })
    }
  }
}



let p11 = new MyPromise((resolve,reject)=>{
  setTimeout(() => {
    reject(11)
  }, 100);
})
p11.then(res=>{
  console.log("res",res); // 11
})