从Promise结构到Promise实现

简介: nodejs面试时,会常常被问到promise的相关实现和原理,甚至还有现场写个Promise的实现。所以首先对Promise要有一定的了解。

nodejs面试时,会常常被问到promise的相关实现和原理,甚至还有现场写个Promise的实现。所以首先对Promise要有一定的了解。

Promise结构

let p = new Promise((resolve, reject) => {
  // doing something
  ... ... 
  resolve(result)  // 成功
  //reject(errmsg) // 失败
})
.then(result => { ... }, errmsg => { ... })
.catch(error => {... })
  • Promise有三种状态:pending,fulfilled,rejected
  • Promise是一个类,构造函数的参数是一个函数,函数接收的参数也是2个函数(reslove函数和reject函数)
  • resolve函数表示成功,传入的值会传给then方法的回调函数,reject函数表示失败
  • 有个then方法,有2个参数,第一个参数是成功之后执行的回调函数,第二个参数是失败之后的执行的回调函数;且then方法在resolve或reject执行之后才会执行
  • Promise支持链式调用

实现Promise

实现一个Promise类,需要以下内容:

1、状态:进行中,成功,失败;且状态转换只允许是:进行中-->成功;进行中-->失败

2、resolve和reject方法

3、then方法:参数为2个回调函数

4、执行方法:promise状态改变的方法

5、链式调用:每次then方法都返回一个新的Promise

class myPromise {
    static pending = 'pending';
    static fulfilled = 'fulfilled';
    static rejected = 'rejected';
​
    constructor(executor) {
        this.status = myPromise.pending;//初始状态为pending
        this.value = undefined; // 操作成功时返回值
        this.message = undefined; // 操作失败时返回值
​
        this.callbacks = [];
      // 绑定this防止执行时this指向对象改变
        executor(this._resolve.bind(this), this._reject().bind(this))
    }
   // 参数onFulFilled 是函数,成功时执行
   // 参数onRejected是函数,失败时执行
   // 不是then函数在状态改变后执行,而是then中的回调函数在状态改变后执行,所以then方法将回调当入队列中
    then(onFulFilled, onRejected) {
        return myPromise((nextResolve, nextRejected) => {
            this._handler({
                nextResolve,
                nextRejected,
                onFulFilled,
                onRejected
            })
        })
    }
​
    _resolve(value) {
        this.value = value;
        this.status = myPromise.fulfilled;// 状态设置为成功
​
        // 通知事件执行
        this.callbacks.forEach((cb) => { this._handler(cb) })
    }
​
    _reject(message) {
        this.message = message;
        this.status = myPromise.rejected; // 状态设置为失败
        // 通知事件执行
        this.callbacks.forEach((cb) => { this._handler(cb) })
    }
​
     _handler(callback) {
        const { onFulFilled, onRejected ,nextResolve, nextReject} = callback;
        if (this.status === myPromise.pending) {
            this.callbacks.push(callback);
            return;
        }
​
        if (this.status === myPromise.fulfilled) {
            // 传入存储的值
            // 未传入onFulfilled时,将undefined传入
            const nextValue = onFulfilled ? onFulfilled(this.value) : undefined;
            nextResolve(nextValue);
            return;
        }
​
        if (this.status === myPromise.rejected) {
            // 传入存储的错误信息
            // 同样的处理
            const nextMessage = onRejected ? onRejected(this.message) : undefined;
            nextResolve(nextMessage);
        }
    }
}
​

面试题

1、题目1:Promise中then第二个参数与catch的区别

  • 如果在then的第一个函数里抛出了异常,后面的catch能捕获到,而then的第二个函数捕获不到
  • then的第二个参数和catch捕获错误信息的时候会就近原则,如果是promise内部报错,reject抛出错误后,then的第二个参数和catch方法都存在的情况下,只有then的第二个参数能捕获到,如果then的第二个参数不存在,则catch方法会捕获到。

2、使用Promise方式实现一个睡眠2秒的机制

init();
​
async function init(){
  var temp = await sleepFunc(2000);
  console.log('sleep 2s 后输出');
}
// Promise方式实现sleep方法
function sleepFunc(mitime) {
    return new Promise((resolve) =>{
        setTimeout(resovle, mitime)
    })
}
目录
相关文章
|
前端开发 JavaScript
promise自定义封装---初识结构搭建
promise自定义封装---初识结构搭建
58 0
|
前端开发 开发者
剖析Promise内部结构,一步一步实现一个完整的、能通过所有Test case的Promise类
本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,建议先了解Promise的使用 Promise标准解读 1.
762 0
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
65 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
86 4
|
6月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
89 0
|
4月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
55 1
|
5月前
|
前端开发 JavaScript
Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。
【6月更文挑战第27天】Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。它避免了回调地狱,通过链式调用`.then()`和`.catch()`使异步流程清晰。
48 2