一、背景&学完可以收获什么

    1. 手写promise是很多大厂面试的必备题目
    2. 帮助我们从底层理解proimse,应对各种面试题,以及真实工作环境下解决问题。
    3. 浏览器机制,EventLoop,宏任务、微任务、Promise
  1. 知识储备
    1. js ==> 进阶课程
    2. es6
      1. es6
      2. 箭头函数 普通函数
    3. Promise基本了解
  2. promise是什么?
    1. Promise是js异步编程的新的解决方案
    2. 语法上来说promise是一个构造函数/类
    3. 功能上说:promise可以封装一个异步操作并可以获得结果
  3. promise基础语法
    1. const p = new Promise((resolve, reject) => {
      setTimeout(function() {
      reject('error')
       }, 1000)
      })

      p.then(value => {
      console.log('成功拿到了结果' + success);
      },err => {
      console.log(err)
      })
  4. 内部的状态改变
    1. Pending ==> resolve  reject

前端必备知识点之手写promise_promise

  1. 默认为pending状态
  2. pending ==> resolved
  3. pending ==> rejected
  4. 状态只能改变一次
  5. 无论成功或者失败都会有一个结果,失败的结果一般成为reason,成功的结果一般叫做value

Promise A+ 规范

  1. Promise是一个类
  2. executor同步执行的函数, 传入两个函数resolve, reject,需要内部定义两个函数
  3. resolve和reject都需要传入成功的原因和失败的结果参数
    1. resolve调用会改变内部状态为resolved
    2. reject调用改变内部状态为rejected
  4. 定义then方法,传入两个函数参数,成功的回调以及失败的回调
  5. 内部有三个状态 pending ==> resolve || pending ==> reject(只能能从pending改变)
  6. 如果是resolve需要执行then的第一个参数(function)
  7. 如果是reject需要执行then后面第二个参数(function)
  8. onFulfilled || onRejected执行的时候还需要有参数,成功的结果或者失败的原因
  9. 只有在pending的时候状态才能改变
  10. 处理executor内部的错误,调用reject同时传入错误对象进去
  11. 处理异步调用的resolve & 并且能够多次调用then方法(then传进来的方法存起来,状态改变时候再去调用)
  12. then方法的两个参数必须都是异步执行的,不能再当前执行栈执行 可以使用queueMicrotask方法

链式调用

  1. 每次then都返回一个promise
  2. 如果上一次then里面的参数(onFulfilled/onRejected)调用返回的是基本值,使用函数的返回值resolve
  3. 如果代码抛错,使用错误原因reject
  4. 如果是promise,则使用promise执行的结果来处理如果x存在then方法就认为是一个promise
    1. 如果x为promise时候,
    2. 如果resolve为普通值,下次then也是调用resove处理
    3. resolve的值为promise需要继续等待promise完成作为下一次then的结果 (递归调用resolvePromise)
    4. 如果失败,直接调用下一次的reject即可
    5. 状态只能改变一次

5、如果then执行之后返回的promise,跟处理函数执行返回的promise为同一个值时候,使用reject:TypeError: Chaining cycle detected for promise # 5、穿透性,如果成功或者失败的回调不传function,使用默认值

测试用例代码

promises-aplus-tests

Promise.defer = Promise.deferred = function () {  let dfd = {};
  dfd.promise = new Promise(function (resolve, reject) {dfd.resolve = resolve;dfd.reject = reject;  });
  return dfd;};module.exports = Promise;

EventLoop

前端必备知识点之手写promise_promise_02