promise的简单理解

(1):promise对象


 什么是promsie,promise字面就是承诺,承诺一段时间做出回应

 promise产生的历史原因,回调函数的层层嵌套的回调"地狱",不够优雅和易用

 promise的三种状态 pending fulfilled reject

 promise的特点
 promise的状态不可逆,要么是成功要么是失败,当处于pending状态,未知是成功还是失败
 promise的结果必须通过回调函数返回出去,不然就会处于pending未知状态
 promise对象的状态不受外界影响。


(2): new Promise对象

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

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

//   错误捕捉的第一种写法
// },error=>{  
//   console.log("error",error)
// })
  // 错误捕捉的第二种写法
}).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)
  // })
  // 当然也可以这样简写
 // return Promise.resolve(res) 
 // 当然也可以这样
 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);

//   错误捕捉的第一种写法
// },error=>{  
//   console.log("error",error)
// })
  // 错误捕捉的第二种写法
}).catch(err=>{
  console.log(err);
})

// promsie.all 处理并发请求

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=>{ // 对于有一个报错,只会返回当前对应的队列的promise的错误消息
  console.log("res===",res)
}).catch(err=>{
  console.log("err===",err); // 33 
})
  • 很显然我们想要所有的结果(不管是成功还是失败),那么如何解决promise.all的错误造成其它promise不执行
    <font color="#f60">1: 批量处理promiseAll错误</font>
// 批量处理promsie错误、
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=>{ // 对于有一个报错,只会返回当前对应的队列的promise的错误消息
  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错误</font>

let arr = [p1,p2,p3,p4]
Promise.allSettled(arr).then(res=>{ // 对于有一个报错,只会返回当前对应的队列的promise的错误消息
  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顾名思义就是赛跑的意思,谁快执行谁</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">对于报错呢race怎么处理,是不是也是只返回执行最快的那个promise对象错误消息呢</font>
  • <font color="#f60">我们把p1改为reject</font>
let p1 = new Promise((resolve,reject)=>{
  setTimeout(() => {
    reject(11)
  }, 1000);
})
在这里插入图片描述

(5): 面试官你TM会promise,倒是就手写一个啊


class MyPromise {
  constructor(executor) {
    // 规定状态
    this.state = "pending"
    // 保存 `resolve(res)` 的res值
    this.value = undefined
    // 保存 `reject(err)` 的err值
    this.reason = undefined
    // 成功存放的数组
    this.successCB = []
    // 失败存放的数组
    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 {
      // 执行
      executor(resolve, reject)
    } catch (error) {
      // 若出错,直接调用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
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容