Promise

Traced back

已于 2024-09-21 23:52:09 修改

阅读量714

点赞数 8

文章标签：前端 javascript 开发语言

于 2024-09-21 20:19:40 首次发布

本文链接：https://blog.csdn.net/m0_75085583/article/details/142421678

版权

背景：

Promise是JavaScript中用于处理异步操作的一种方式，提供了一种简介且强大的方法来处理异步代码，避免了方法回调(回调地狱：什么是回调地狱？以及如何解决回调地狱-CSDN博客https://blog.csdn.net/happy_kx/article/details/124483644?ops_request_misc=%257B%2522request%255Fid%2522%253A%252220666D14-BBD3-4AC5-80A7-B2BCA694DBDE%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=20666D14-BBD3-4AC5-80A7-B2BCA694DBDE&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-124483644-null-null.142%5Ev100%5Epc_search_result_base1&utm_term=%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1&spm=1018.2226.3001.4187)

三种状态：

1.Pending(待定状态)：初始状态，既不是成功也不是失败

2。Fulfilled(成功状态)：表示异步操作成功完成并返回一个成功的值

3.Rejected（失败状态）：表示异步操作失败，并返回一个原因

状态转化：(只有种状态)

Pending——>Fufilled状态

Pending——>REjected状态

注意：一旦转换到fulilled或者Rejected状态 Promise的状态就不可改变

常用方法：

1，Promise.resolve（）：成功状态的值 then来接收，then有两个回调函数，第一个接受唱成功的值，第二个参数是来接受失败的值

2，Promise.rejecet（）：失败状态的值常用catch接收

3，Promise.all():处理异步任务的并发(同一时间放生多个异步任务)场景,全部成功才成功，只要有一个不成功就不会成功

4，Promise.any（）:处理异步任务的并发场景，只要有一个成功就成功

官方写法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
//该方法返回的是一个实例对象
//Promise内部接收一个参数(回调函数)
//该回调函数有两个参数，resolve:成功状态reject：失败状态
new Promise((resolve,reject)=>{
     setTimeout(()=>{
      if(Math.random()>0.5){
        resolve('成功')
      }else{
        reject('失败')
      }
     },1000)
//then有两个参数，第一个接受的是返回成功的值，而第二参数接受的是失败的值(第二个参数一般不用)
    }).then(res=>{
      console.log('成功',res);
      
    },err=>{
      console.log('失败',err);
      
    })
//用来接收失败的值也就是上文返回的rejecte的值(常用)
    .catch((err)=>{
      console.log('失败',err);
      
    })
//无论返回的是resolve还是reject的值都会执行一次
    .finally(()=>{
      console.log('都会执行');
      
    })
</body>
</html>

Promise结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  var MyPromise(function(window){
    //根据判断状态执行出结果，要有三个状态，，
//只有两种状态转化，准备状态到成功状态，准备状态到失败状态
     const PENDING = 'pending';  //准备状态
     const RESOLVE = 'resolve';  //成功状态
     const REJECT = 'reject';  //失败状态
//返回的是Mypromise的class
retrun new Mypromiise{
    //构造函数，参数是回调函数
    consturctor(fn){
    //设置默认状态
    this.status = PENDING; //默认为等待状态
    this.value = undefined; //成功状态的数据
    this.reason = undefined; //失败状态的数据
//需要执行异步操作，此处类似将异步代码放进异步队列中(先进先出)
    this.onFulfillCallback = []
    this.onRejectCallback = []
    //声明成功方法
const resolve = value =>{
    //判断当前状态是否为等待状态
    if(this.status === PENDING){
    this.tatus = RESOLVE   //改为成功状态
    this.value = value //将成功的数据保存
//状态变为成功就执行成功队列里面的函数
    this.onFulfillCallback.forEach(()=>{
    cd =>cd();
})
}
//声明失败的方法
const resolve = reason=>{
    //判断当前状态是否为等待状态
    if(this.status === PENDING){
    this.tatus = REJECT//改为失败状态
    this.reason= reason//将失败的数据保存
//状态变为失败就执行失败任务队列里面的函数 队列
 this.onRejectCallback .map(()=>{
    cd =>cd();
})
}
//同步带码的错误处理try catch
try{
//调用fn回调函数传进成功和失败的参数
fn(resolve，reject)
}catch（error）{
    reject（error）  //出现错误使输出结果为error
}
}
//then方法
then(onFulfilled,onRejected){  //传入两个参数分别是成功，失败
//then方法的第一个参数，也就是成功的参数
if(this.status === RESOLVE){  //如果当前状态为成功状态
    onFulfilled && onFulfilled（this.value）//运用短路与 第一个值为真 则执行后面的
}
//then方法的第二个参数，也就是失败的参数
if(this.status === REJECT){  //如果当前状态为失败状态
    onRejected && onRejected（this.reason）  //运用短路与 第一个值为真 则执行后面的
//异步代码的处理
if(this.statuse == PENDING){
//成功的回调添加到onFulfillCallback队列中
    this.onFulfillCallback.push(()=>{
    onFulfilled && onFulfilled（this.value）

})
if(this.statuse == PENDING){
失败的回调添加到onRejectCallback 队列中
    this.onRejectCallback .push(()=>{
    onRejected && onRejected（this.reason）

})
}
//失败的方法
catch(onRejected){  //直接传入失败的参数，因为该方法只接受失败的参数
//运用then的方法将失败的值返回
  retrun  this.then(null,onRejected)
}

//finally方法(无论如何也会执行一次，不管成功还是失败)
finally(){
//直接执行任意一个函数的返回值
retrun this.then(()=>{cd()},()=>{cd()})
}
}
})(window)

   new MyPromise((resolve, reject) => {
        setTimeout(() => {
          if (Math.random() > 0.5) {
            resolve("new Promise成功");
          } else {
            reject("new Promise 失败");
          }
        },50);
      })
.then(
      (res)=>{
        console.log('成功状态',res);
      },
      (err)=>{
        console.log('失败状态',err);
      }

    )
    .catch(err=>{
      console.log('失败',err);
      
    })
    .finally(()=>{
      console.log(567);
      
    })
</body>
</html>