Promise知识总结

作者: 前端辉羽 | 来源:发表于2021-04-08 08:37 被阅读0次

本文目录：

1.什么是回调函数？回调函数有什么缺点
2.Promise是什么，可以手写实现一下吗
3.手写简单版的Promise
4.then,catch,finally
5.手写promise.all
6.手写promise.race
7.Promise里都是微任务吗
8.async await 和 promise 的区别与联系
9.Promise中用了什么设计模式

1.什么是回调函数？回调函数有什么缺点

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。
在JavaScript中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另外一个函数，这个作为参数的函数就是回调函数。

const btnAdd = document.getElementById('btnAdd');
btnAdd.addEventListener('click', function clickCallback(e) {
    // do something useless
});

在本例中，我们等待id为btnAdd的元素中的click事件，如果它被单击，则执行clickCallback函数。回调函数向某些数据或事件添加一些功能。
回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个事件存在依赖性：

setTimeout(() => {
    console.log(1)
    setTimeout(() => {
        console.log(2)
        setTimeout(() => {
            console.log(3)
        },3000)
    },2000)
},1000)

这就是典型的回调地狱，以上代码看起来不利于阅读和维护，事件一旦多起来就更是乱糟糟，所以在es6中提出了Promise和async/await来解决回调地狱的问题。当然，回调函数还存在着别的几个缺点，比如不能使用 try catch 捕获错误，不能直接 return。

2.Promise是什么，可以手写实现一下吗

Promise，翻译过来是承诺，承诺它过一段时间会给你一个结果。从编程讲Promise 是异步编程的一种解决方案。下面是Promise在MDN的相关说明：
Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。
一个 Promise有以下几种状态:
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 fulfilled/rejected 后，就不能再次改变。可能光看概念大家不理解Promise，我们举个简单的栗子；
假如我有个女朋友，下周一是她生日，我答应她生日给她一个惊喜，那么从现在开始这个承诺就进入等待状态，等待下周一的到来，然后状态改变。如果下周一我如约给了女朋友惊喜，那么这个承诺的状态就会由pending切换为fulfilled，表示承诺成功兑现，一旦是这个结果了，就不会再有其他结果，即状态不会在发生改变；反之如果当天我因为工作太忙加班，把这事给忘了，说好的惊喜没有兑现，状态就会由pending切换为rejected，时间不可倒流，所以状态也不能再发生变化。
上一条我们说过Promise可以解决回调地狱的问题，没错，pending 状态的 Promise 对象会触发 fulfilled/rejected 状态，一旦状态改变，Promise 对象的 then 方法就会被调用；否则就会触发 catch。我们将上一条回调地狱的代码改写一下：

new Promise((resolve，reject) => {
     setTimeout(() => {
            console.log(1)
            resolve()
        },1000)
}).then((res) => {
    setTimeout(() => {
            console.log(2)
        },2000)
}).then((res) => {
    setTimeout(() => {
            console.log(3)
        },3000)
}).catch((err) => {
console.log(err)
})

其实Promise也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。

3.手写简单版的Promise

promise手写实现，面试够用版：

function myPromise(executor) {
  var _this = this;
  this.onFulfilled = []; //成功的回调
  this.onRejected = []; //失败的回调
  this.state = "PENDING"; //状态
  this.value = undefined; //成功结果
  this.reason = undefined; //失败原因
  function resolve(value) {
    if (_this.state === "PENDING") {
      _this.state = "FULFILLED";
      _this.value = value;
      _this.onFulfilled.forEach((fn) => fn(value));
    }
  }
  function reject(reason) {
    if (_this.state === "PENDING") {
      _this.state = "REJECTED";
      _this.reason = reason;
      _this.onRejected.forEach((fn) => fn(reason));
    }
  }
  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
// 定义链式调用的then方法
myPromise.prototype.then = function (onFullfilled, onRejected) {
  if (this.state === "FULFILLED") {
    typeof onFulfilled === "function" && onFulfilled(this.value);
  }
  if (this.state === "REJECTED") {
    typeof onRejected === "function" && onRejected(this.reason);
  }
  if (this.state === "PENDING") {
    typeof onFulfilled === "function" &&
      this.onFulfilled.push(onFulfilled);
    typeof onRejected === "function" && this.onRejected.push(onRejected);
  }
};
var myP = new myPromise((resolve, reject) => {
  console.log("执行");
  setTimeout(() => {
    reject(3);
  }, 1000);
});
myP.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

4.then,catch,finally

then 方法的第一个参数是 resolved 状态对应的回调函数, 第二个参数(可选) 是 rejected 状态对应的回调函数,then方法返回的是一个新的 Promise 实例.(注意, 不是原来那个Promise实例), 因此可以采用链式写法, 即 then 方法后面再调用另一个 then 方法.

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

Promise.prototype.catch() 方法是 `.then(null,rejection) 或.then(undefined,rejection)的别名, 用于指定发生错误时的回调函数.

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

上面代码中，getJSON()方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

5.手写promise.all

promise.all方法：当参数中的promise有一个失败了就直接返回失败的结果，返回第一个失败的结果，都成功返回所有的参数结果
思路：
返回一个新的promise，并遍历调用传入的promise组成的数组参数，利用Promise.resolve()方法获取成功执行的所有promise的数量和数组参数的长度进行比对，如果长度小于参数，则代表有失败的结果，否则就是全部成功。

function promiseAll(promises){
  // 返回一个promise实例
  return new Promise((resolve, reject) => {
    // 做一个判断参数是否是数组
    if(!Array.isArray(promises)){
      return reject(new TypeError('arguments must be Array'))
     }
   let count = 0,
       newValues = new Array(promise.length)  // 接收新的结果参数 建立一个伪数组
    for(let i = 0; i < promises.length; i++){ 
   // 运用promise特性 只会有一个状态
      Promise.resolve(promises[i])
      .then(res = > {
        count++
        newValues[i] = res // 把每次返回成功的数据添加到数组中
       if(count === promises.length){ // 数据接收完成
           resolve(newValues)  
        }
      }, rej = >  reject(rej))
     }
   }) 
}

成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。,需要注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。

6.手写promise.race

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

function promiseRace(arrays){
    if(!Array.isArray(arrays))
    return 'not Array'
    return new Promise((resolve,reject)=>{
    for(var i = 0; i < arrays.length; i++){
       Promise.resolve(arrays[i]).then((value)=>{
                resolve(value)
        }, (err)=>{reject(err)})
    }
  })
}

7.Promise里都是微任务吗

Promise 中只有涉及到状态变更后才需要被执行的回调才算是微任务，比如说 then、 catch 、finally ，其他所有的代码执行都是宏任务（同步执行）。

8.async await 和 promise 的区别与联系

async await 和 promise 都是异步编程解决方案。
Promise的写法只是回调函数的改进，使用then方法，只是让异步任务的两段执行更清楚而已。Promise的最大问题是代码冗余，请求任务多时，一堆的then，也使得原来的语义变得很不清楚。
async搭配await是ES7提出的，它的实现是基于Promise，通过同步方式的写法，使得代码更容易阅读。
async/await的优势在于处理 then 的调用链，能够更清晰准确的写出代码，并且也能优雅地解决回调地狱问题。当然也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

9.Promise中用了什么设计模式

观察者模式在软件设计中是一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。
发布-订阅模式是一种消息传递模式，消息的发布者（Publishers）一般将消息发布到特定消息中心，订阅者（Subscriber）可以按照自己的需求从消息中心订阅信息，跟消息队列挺类似的。

观察者设计模式的代码实现


// 观察者设计模式
class Observer {
  constructor () {
    this.observerList = [];
  }
 
  subscribe (observer) {
    this.observerList.push(observer)
  }
 
  notifyAll (value) {
    this.observerList.forEach(observe => observe(value))
  }
}

发布-订阅设计模式的代码实现


// 发布订阅
class EventEmitter {
  constructor () {
    this.eventChannel = {}; // 消息中心
  }
 
  // subscribe
  on (event, callback) {
    this.eventChannel[event] ? this.eventChannel[event].push(callback) : this.eventChannel[event] = [callback]
  }
 
  // publish
  emit (event, ...args) {
    this.eventChannel[event] && this.eventChannel[event].forEach(callback => callback(...args))
  }
 
  // remove event
  remove (event) {
    if (this.eventChannel[event]) {
      delete this.eventChannel[event]
    }
  }
 
  // once event
  once (event, callback) {
    this.on(event, (...args) => {
      callback(...args);
      this.remove(event)
    })
  }
}

从代码中也能看出他们的区别，观察者模式不对事件进行分类，当有事件时，将通知所有观察者。发布-订阅设计模式对事件进行了分类，触发不同的事件，将通知不同的观察者。所以可以认为后者就是前者的一个升级版，对通知事件做了更细粒度的划分。
发布-订阅和观察者在异步中的应用
观察者模式


const observer = new Observer();
observer.subscribe(value => {
  console.log("第一个观察者，接收到的值为:");
  console.log(value)
});
observer.subscribe(value => {
  console.log("第二个观察者，接收到的值为");
  console.log(value)
});
fs.readFile("h.js", (err, data) => {
  observer.notifyAll(data.toString())
});

发布-订阅模式


// 发布-订阅
const event = new EventEmitter();
event.on("err", console.log);
event.on("data", data => {
  // do something
  console.log(data)
});
fs.readFile("h.js", (err, data) => {
  if (err) event.emit("err", err);
  event.emit("data", data.toString())
});

两种设计模式在异步编程中，都是通过注册全局观察者或全局事件，然后在异步环境里通知所有观察者或触发特定事件来实现异步编程。
劣势也很明显，比如全局观察者/事件过多难以维护，事件名命冲突等等，因此Promise便诞生了，Promise在一定程度上继承了观察者和发布-订阅设计模式的思想。

Promise知识总结

1.什么是回调函数？回调函数有什么缺点

2.Promise是什么，可以手写实现一下吗

3.手写简单版的Promise

4.then,catch,finally

5.手写promise.all

6.手写promise.race

7.Promise里都是微任务吗

8.async await 和 promise 的区别与联系

9.Promise中用了什么设计模式

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

前端启示录

零基础转行前端