Promise知识总结

时间:2021-6-12 作者:qvyue

本文目录:

  • 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  {
        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 {
                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在一定程度上继承了观察者和发布-订阅设计模式的思想。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。