Promise对象

狐白吟
78 阅读3分钟
什么是回调地狱

当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数，异步行为是JavaScript的基础，但以前的实现不理想，在早期，只支持定义回调函数来表明异步操作的完成，当我们需要串联多个异步操作，通常需要深度嵌套的回调函数，我们称之为回调地狱 image.png

回调地狱就是为实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

期约Promise

什么是Promise

Promise是异步编程的一种解决方案，是一个对象，可以获取异步操作的消息，大大改善了异步编程的困难，避免了回调地狱，比传统的解决方案回调函数和事件更合理和更强大。从语法上讲，Promise是一个对象，它可以获取异步操作的消息。提供了一个统一的API，各种异步操作都可以用同样的方法进行处理

为什么引入Promise？
  • 避免异步处理时深度嵌套形成的回调地狱，增强代码的可维护性和可阅读性
  • 制定一套处理错误结果和正确结果的标准方式，简化代码复杂度
Promise长啥样？

  • 创建一个promise语法：

      new Promise( function(resolve, reject) {...} /* executor处理器函数*/  );

  • 一个 Promise有以下几种状态:

    • pending: 初始状态，既不是成功，也不是失败状态。
    • fulfilled: 意味着操作成功完成。
    • rejected: 意味着操作失败。
    • 状态的转换是不可逆的，且 fulfilled 不能转换为 rejected
      • 注意:
      • 只有这两种状态转变,且一个Promise对象只能改变一次状态
      • 无论成功或失败都会有一个结果

  • promise处理器函数的参数

    • resolve和reject两个函数作为executor处理器函数的参数
    • Promise构造函数 执行时立即调用 executor 函数， resolve 和 reject 两个函数作为参数传递给 executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。 resolve 和 reject 函数被调用时，分别将promise的状态改为 fulfilled（ 完成）或rejected（失败）。

  • promise的原理是，利用then方法将异步操作的结果，按照顺序执行，catch方法用来接收处理失败时相应的数据。在上一个promise的then方法中，返回下一个promise对象

  • promise的一个例子

     var promise1 = new Promise(function(resolve, reject) {
   setTimeout(function() {
     resolve('foo');
   }, 300);
 });

 promise1.then(function(value) {
   console.log(value);
  // expected output: "foo"
 });

 console.log(promise1);
 // expected output: [object Promise]

Promise.prototype.then ( onFulfilled , onRejected)

then方法接受两个参数，第一个参数是成功时的回调(异步)，另一个是失败时的回调(异步)

当promise状态变为fulfilled，执行第一个参数

当promise状态变为rejected，执行第二个参数

Promise执行流程

image.png

async/await

  1. async是用来声明一个异步方法,await用来等待异步方法的执行

  2. 正常情况下await后边是一个Promise对象,返回该对象的结果。如果不是Promise对象,直接返回封装好的promise。await 都会阻塞函数中后边的代码（即加入微队列）

  3. 简而言之，async/await的用处是：用同步的方式执行异步的操作。

//举个栗子，不用async实现的异步
function request(num) {
    return new Promise(resolve => {
         setTimeout(() => {
                resolve(num * 2)
         }, 2000)
    })
}
request(1).then(res1 => {
    console.log(res1)
    
    request(res1).then(res2 => {
         console.log(res2)
    })
})
//使用async/await实现的异步
async function fn () {
   const res1 = await request(1)
   const res2 = await request(res1)
   console.log(res2)
}
fn()

async/await使用时注意

  • async是用来声明一个异步方法,await用来等待异步方法的执行
  • async函数返回的是一个Promise对象，有无值看有无return值
  • await后面最好是接Promise，接其他值不一定能达到排队效果
  • await只能在async函数中使用，不然会报错
avatar
文章
阅读
粉丝