Promise与宏微任务与异步处理

宏队列微队列

原理图

说明

1. JS 中用来存储待执行回调函数的队列包含2个不同特定的列队

2. 宏列队: 用来保存待执行的宏任务(回调), 比如: 定时器回调 DOM 事件回调 ajax 回调

3. 微 列 队 : 用 来 保 存 待 执 行 的 微 任 务 ( 回 调 ), 比 如 : promise 的 回 调 MutationObserver 的回调

4. JS 执行时会区别这 2 个队列

   • JS 引擎首先必须先执行所有的初始化同步任务代码
   • 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出 来执行

Promise

Promise 是 JS 中进行异步编程的新的解决方案

• 从语法上来说: Promise 是一个构造函数
• 从功能上来说: promise 对象用来封装一个异步操作并可以获取其结果

概念

Promise 实例一共拥有三种状态：

• pendding ：初始状态。
• resolve ：成功状态，返回一个成功的值。
• reject ： 失败状态，返回一个失败的原因。

一个 Promise 示例初始状态是 pendding，并且只能修改一次状态。多次修改的话，只执行第一次，后面的不会响应。

Promise 执行流程：

为什么要使用 promise

指定回调函数的方式更加灵活

• 旧的: 必须在启动异步任务前指定
• promise 启动异步任务 => 返回 promie对象 => 给 promise 对象绑定回调函 数(甚至可以在异步任务结束后指定/多个)

支持链式调用, 可以解决回调地狱问题，终极解决方案 async 、await

属性方法

Promise 构造函数

• excutor 函数：执行器 (resolve, reject) => {}
• resolve 函数: 内部定义成功时我们调用的函数 value => {}
• reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: excutor 会在 Promise 内部立即同步回调,异步操作在执行器中执行

Promise.prototype.then

Promise.prototype.then (onResolved, onRejected) => {}

• onResolved 函数: 成功的回调函数 (value) => {}
• onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象

Promise.prototype.catch

Promise.prototype.catch(onRejected) => {}

• onRejected 函数: 失败的回调函数 (reason) => {}

说明: then()的语法糖, 相当于: then(undefined, onRejected)

Promise.resolve

Promise.resolve(value) => {}

value: 成功的数据或 promise 对象

说明: 返回一个成功/失败的 promise 对象

Promise.reject

Promise.reject(reason) => {}

reason: 失败的原因 说明: 返回一个失败的 promise 对象

Promise.all

Promise.all(promises) => {}

promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就 直接失败

Promise.race

Promise.race (promises) => {}

promises: 包含 n 个 promise 的数组。

说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

关键问题

1. 如何改变 promise 的状态?

   • resolve(value): 如果当前是 pendding 就会变为 resolved
   • reject(reason): 如果当前是 pendding 就会变为 rejected
   • 抛出异常: 如果当前是 pendding 就会变为 rejected

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

   • 当 promise 改变为对应状态时都会调用

3. 改变 promise 状态和指定回调函数谁先谁后?

• 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
• 如何先改状态再指定回调?
  • 在执行器中直接调用 resolve()/reject()
  • 延迟更长时间才调用 then()
• 什么时候才能得到数据?
  • 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
  • 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

4. promise.then() 返回的新 promise 的结果状态由什么决定?
   • 简单表达: 由 then()指定的回调函数执行的结果决定
   • 详细表达
     • 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
     • 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
     • 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
5. promise 如何串连多个操作任务?
   • promise 的 then() 返回一个新的 promise, 可以开成 then() 的链式调用
   • 通过 then 的链式调用串连多个同步/异步任务
6. promise 异常传透?
   • 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
   • 前面任何操作出了异常, 都会传到最后失败的回调中处理
7. 中断 promise 链?
   • 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
   • 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

手写 Promise

const PENDDING = "pendding";
const REJECTED = "rejected";
const RESOLVED = "resolved";

function resolve(value) {
  if (this.state !== PENDDING) return;
  this.state = RESOLVED;
  this.data = value;
  this.callbacks.forEach((callbacks) => {
    setTimeout(() => {
      callbacks.onResolved(value);
    });
  });
}

function reject(reason) {
  if (this.state !== PENDDING) return;
  this.state = REJECTED;
  this.data = reason;
  this.callbacks.forEach((callbacks) => {
    setTimeout(() => {
      callbacks.onRejected(reason);
    });
  });
}

class Promise {
  constructor(excutor) {
    this.state = PENDDING; // promise 状态
    this.data = undefined; // 当前promise的数据
    this.callbacks = []; // 用来存储回调函数的队列 形如 ：[{onResolved,onRejected}]

    try {
      excutor(resolve.bind(this), reject.bind(this));
    } catch (error) {
      reject(error);
    }
  }

  then(onResolved, onRejected) {
    onResolved =
      typeof onResolved === "function" ? onResolved : (value) => value;
    onRejected =
      typeof onRejected === "function" ? onRejected : (reason) => reason;

    return new Promise((resolve, reject) => {
      let handle = (handler) => {
        try {
          let res = handler(this.data);
          if (res instanceof Promise) {
            res.then(resolve, reject);
          } else {
            resolve(res);
          }
        } catch (error) {
          reject(error);
        }
      };

      if (this.state === RESOLVED) {
        setTimeout(() => {
          handle(onResolved);
        });
      } else if (this.state === REJECTED) {
        setTimeout(() => {
          handle(onRejected);
        });
      } else {
        this.callbacks.push({
          onResolved(value) {
            handle(onResolved);
          },
          onRejected(reason) {
            handle(onRejected);
          },
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(undefined, onRejected);
  }

  static resolve(value) {
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(resolve, reject);
      } else {
        resolve(value);
      }
    });
  }
  static reject(reason) {
    return new Promise((resolve, reject) => {
      if (reason instanceof Promise) {
        reason.then(reject, reject);
      } else {
        reject(reason);
      }
    });
  }

  static all(promises) {
    return new Promise((reslove, reject) => {
      let count = 0;
      let resArr = [];
      promises.forEach((p, index) => {
        Promise.resolve(p).then(
          (value) => {
            count++;
            resArr[index] = value;
            if (count === promises.length) {
              reslove(resArr);
            }
          },
          (reason) => {
            reject(reason);
          }
        );
      });
    });
  }

  static race(promises) {
    return new Promise((resovle, reject) => {
      promises.forEach((p) => {
        Promise.resolve(p).then(resovle, reject);
      });
    });
  }
}

async / await

async

• 函数的返回值为 promise 对象
• promise 对象的结果由 async 函数执行的返回值决定

await

• await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
• 如果表达式是 promise 对象, await 返回的是 promise 成功的值
• 如果表达式是其它值, 直接将此值作为 await 的返回值

注意

• await 必须写在 async 函数中, 但 async 函数中可以没有 await
• 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
• await 表达式 ：是微任务，await 后面的代码表达式以及后面的代码都会在执行微任务时执行。是异步的。

宏任务、微任务题

题一

setTimeout(()=>{
  console.log(1)
},0)
Promise.resolve().then(()=>{
  console.log(2)
})
Promise.resolve().then(()=>{
  console.log(4)
})
console.log(3)

题二

setTimeout(() => {
  console.log(1)
}, 0)
new Promise((resolve) => {
  console.log(2)
  resolve()
}).then(() => {
  console.log(3)
}).then(() => {
  console.log(4)
})
console.log(5)

题三

const first = () => (new Promise((resolve, reject) => {
  console.log(3)
  let p = new Promise((resolve, reject) => {
    console.log(7)
    setTimeout(() => {
      console.log(5)
      resolve(6)
    }, 0)
    resolve(1)
  })
  resolve(2)
  p.then((arg) => {
    console.log(arg)
  })
}))
first().then((arg) => {
  console.log(arg)
})
console.log(4)

题四

setTimeout(() => {
  console.log("0")
}, 0)
new Promise((resolve,reject)=>{
  console.log("1")
  resolve()
}).then(()=>{
  console.log("2")
  new Promise((resolve,reject)=>{
    console.log("3")
    resolve()
  }).then(()=>{
    console.log("4")
  }).then(()=>{
    console.log("5")
  })
}).then(()=>{
  console.log("6")
})
new Promise((resolve,reject)=>{
  console.log("7")
  resolve()
}).then(()=>{
  console.log("8")
})