Promise-CSDN博客

Promise

Promise的结构

class Promise{
    constructor(exector){
        function resolve(){}
        function reject(){}
      exector(resolve,reject)
    }
    
    then(){
    }
}
复制代码

Promise的三种状态

pending、fulfilled、rejected(未决定，履行，拒绝)，同一时间只能存在一种状态,且状态一旦改变就不能再变

为什么用Promise

解决回调地狱

回调地狱：发送多个异步请求时，每个请求之间相互都有关联，会出现第一个请求成功后再做下一个请求的情况。我们这时候往往会用嵌套的方式来解决这种情况，但是这会形成“回调地狱”。如果处理的异步请求越多，那么回调嵌套的就越深。出现的问题：

1.代码逻辑顺序与执行顺序不一致，不利于阅读与维护。

2.异步操作顺序变更时，需要大规模的代码重构。

3.回调函数基本都是匿名函数，bug追踪困难。

解决异步

解决异步的几种方式：

1.回调函数(定时器)。

2.事件监听。

3.发布/订阅。

4.Promise对象。(将执行代码和处理结果分开)

5.Generator。

6.ES7的async/await。

Catch

通过在Promise的then方法的最后加上一个Catch，可以捕获到代码中的所有报错。

Promise.all

可以执行一系列Promise，直到所有promise执行完毕，返回

Promise.race

可以执行一系列Promise，直到第一个promise执行完毕就返回

退出Promise

promise无法通过return null;break;等方式退出，由于promise是一个链式结构，那么我们可以通过让promise的下一个指针为null来终止链条。

promise进行到下一个then的条件是状态改变，如果我们让promise一直停留在pending状态，就会停止这条链条，但是有个问题就是可能存在内存泄漏

Async

async声明的函数的返回本质上是一个Promise

Await

await只会等待promise的异步

Async/Await 的中断和错误处理比promise友好，可以直接通过return退出

Async/Await的中间值处理的更加优秀

如何实现一个Promise

第一步：返回then

function Promise(fn) {
  ...
  return {
    then: function(successFn, errorFn) {
      return undefiend;  //如果不写默认return undefined，这里我们只做一次then，如果要用then链，可能需要递归调用
    }
  }
}
复制代码

第二步：执行传进来的参数

function Promise(fn) {
  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}
复制代码

第三步：定义fn的参数函数

function Promise(fn) {
  function successNotify() {}

  function errorNotify() {}

  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}
复制代码

第四步：添加状态

function Promise(fn) {
  let status = 'pending';

  function successNotify() {
    status = 'resolved';
  }

  function errorNotify() {
    status = 'rejected';
  }

  fn.call(undefined, successNotify, errorNotify); // fn接受两个函数作为参数

  return {
    then: function(successFn, errorFn) {
      return undefined;
    }
  }
}
复制代码

第五步：接下来我们要处理then传进来的函数，如果成功你那个解决了，就要处理then传进来的成功函数，否则要处理失败函数，因此用两个单独的队列放传进来的函数：

function Promise(fn) {
  
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
  }
  
  function errorNotify() {
    status = 'rejected';
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们只做一次then，如果要用then链，可能需要递归调用
    }
  }
}
复制代码

第六步：处理then

function Promise(fn) {
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
    handleThen.apply(undefined, arguments);
  }
  
  function errorNotify() {
    status = 'rejected';
    handleThen.apply(undefined, arguments);
  }
  
  function handleThen() {
    if (status === 'resolved') {
      for (let i = 0; i < successArray.length; i++) {
        successArray[i].apply(undefined, arguments);
      }
    } else if (status === 'rejected') {
      for (let i = 0; i < errorArray.length; i++) {
        errorArray[i].apply(undefined, arguments);
      }
    }
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们简化，只做一次then，如果要用then链，可能需要递归调用
    }
  }
}
复制代码

第七步：确定异步，增加setTimeout

function Promise(fn) {
  let status = 'pending';
  
  let successArray = [];
  let errorArray = [];
  
  function successNotify() {
    status = 'resolved';
    handleThen.apply(undefined, arguments);
  }
  
  function errorNotify() {
    status = 'rejected';
    handleThen.apply(undefined, arguments);
  }
  
  function handleThen() {
    setTimeout(() => {
      if (status === 'resolved') {
        for (let i = 0; i < successArray.length; i++) {
          successArray[i].apply(undefined, arguments);
        }
      } else if (status === 'rejected') {
        for (let i = 0; i < errorArray.length; i++) {
          errorArray[i].apply(undefined, arguments);
        }
      }
    });
  }
  
  fn.call(undefined, successNotify, errorNotify); //fn接受两个函数作为参数
  
  return {
    then: function(successFn, errorFn) {
      successArray.push(successFn);
      errorArray.push(errorFn);
      return undefined; // 如果不写默认return undefined，这里我们简化，只做一次then，如果要用then链，可能需要递归调用
    }
  }
复制代码