面经总结：何为Promise

一时失言乱红尘 2022-12-08 01:31 143阅读 0赞

Promise是ES6提供的对象，代表了未来将要发生的事件，用来传递异步操作的消息。Promise在开发和面试的过程中都很重要，下面我们一起来看一下关于Promise的相关知识。

--------------------

# Promise的状态 #

`Promise`对象代表一个异步操作，有三种状态：

①pending：初始状态  
②fulfilled/resolved：成功的状态  
③rejected：失败的状态

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，一旦状态改变，就不会在变，任何时候都可以得到这个结果。`Promise`对象状态改变，只有两种可能：从`pending`变为`fulfilled`【`resolve`函数执行】，从`pending`变为`rejected`【`reject`函数执行或抛出异常】，只要这两种情况发生，状态就不会再变了，会一直是这个结果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70_pic_center]

# 说一下对Promise的理解 #

`Promise`是JS中进行异步编程的解决方案，是一个构造函数，用来封装一个异步操作并可以获取其结果，可以解决之前的回调地狱的问题。

使用Promise的好处：

①可以避免多层异步调用嵌套问题  
②简洁的API，更加容易控制异步操作

Promise的缺点：

①无法取消`Promise`，一旦新建它就会立即执行，无法中途取消

如果需要中断`Promise`链的话，可以在回调函数中返回一个`pending`状态的`Promise`对象

return new Promise(()=>{ })

②如果不设置回调函数，Promise内部抛出的错误，不会反应到外部  
③当处于pending状态时，无法得知目前进展到哪一阶段

Promise的基本用法：

实例化`Promise`对象，构造函数中传递参数，该函数用于处理异步任务，`resolve`处理成功的情况，`reject`处理失败的情况，`p.then`获取处理结果

// 1.创建一个新的promise对象
    const p = new Promise((resolve, reject) => { 
      // 执行器函数 同步回调
      // 2.执行异步操作任务
      setTimeout(() => { 
        const time = Date.now();
        // 如果当前时间是偶数代表成功，否则代表失败
        // 3.1 如果成功了，调用resolve(value)
        if (time % 2 == 0) { 
          resolve("成功的数据, time=" + time);
        } else { 
          // 3.2 如果失败了，调用reject(reason)
          reject("失败的数据, time=" + time);
        }
      });
    }, 1000);
    
    p.then(
      (value) => { 
        // 接收得到成功的value数据
        console.log("onResolved", value);
      },
      (reason) => { 
        // 接收得到失败的reason数据
        console.log("onRejected", reason);
      }
    );

# 为什么promise可以实现链式调用 #

因为`Promise`的`then()`返回一个新的`Promise`对象

# Promise的输出结果 #

输出结果：1 2 5 3

解释：`Promise`的构造函数是同步执行的，`Promise.then`中的函数是异步执行的，且状态一旦改变，就不会在变。

new Promise((resolve, reject) => { 
      console.log("outer promise start");
      resolve();
      console.log("outer promise done");
    }).then(() => { 
      console.log("outer then1");
      new Promise((resolve, reject) => { 
        console.log("inner promise start");
        resolve("done");
      }).then((param) => { 
        console.log("inner then1", param);
      }).then((param) => { 
        console.log("inner then2", param);
      });
      return true;
    }).then((param) => { 
      console.log("outer then2", param);
      throw Error("error");
    }).catch((param) => { 
      console.log("outer catch", param);
    });

输出结果：  
![在这里插入图片描述][20200917094753832.png]  
解释：我们来分析一波执行流程，先执行`Promise`的构造函数，输出`outer promise start、outer promise done`，`then`函数是微任务，异步执行，但是此时主线程上已经没有待执行的任务，所以执行第一个`then`函数，输出`outer then1、inner promise start、inner then1 done`，链式调用的第二个`then`需要在第一个`then`执行完成之后才能放入微任务队列，所以会先执行`outer then2 true`，之后再输出`inner then2 undefined、outer catch Error： error`

当`then`函数返回`Promise`实例对象时，返回的实例对象会调用下一个`then`；返回普通值时，返回的普通值会直接传递给下一个`then`，通过`then`参数中函数的参数接收该值。

--------------------

到此，关于Promise的总结暂时结束，不知道您有没有收获到什么呢？欢迎评论+点赞哦！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/34991da02f4f4693954e68cdfb9c83c9.png
[20200917094753832.png]: /images/20221123/d5f0fd653bca40d3bcbf9fc48a94c735.png