前端面试题之手写promise

前端面试题之Promise问题

前言

在我们日常开发中会遇到很多异步的情况，比如涉及到 网络请求（ajax,axios等），定时器这些，对于这些异步操作我们如果需要拿到他们操作后的结果，就需要使用到回调函数。拿请求来说，如果我们需要拿到请求回来的数据我们就需要利用回调函数(见代码片段1)，以下所有的请求都是使用jQuery的ajax模拟。

点击查看代码片段1

    // 代码片段1
    $.ajax({
        url: 'url',
        type: 'post',
        data: {
            参数1: 值1,
            参数2: 值2
        },
        success: function(res){
            // success就是响应成功的回调函数，在此处可以获取到响应返回的内容
            console.log(res)
        }
    })

在网络请求中会遇到请求之前的依赖，一个请求会依赖于另一个请求的时候，就会需要出现回调嵌套的问题（代码片段2）

点击查看代码片段2

    // 代码片段2
    // 请求2的请求参数是请求1的响应结果
    // 请求3的请求参数是请求2的响应结果
    $.ajax({
        url: '请求1的地址',
        type: 'post',
        data: {
            参数1: 值1,
            参数2: 值2
        },
        success: function(res){
            // res是请求1的响应结果
            console.log(res)
            $.ajax({
                url: '请求2的地址',
                type: 'post',
                data: {
                    // 参数1是请求1的响应结果
                    参数1: res,
                    参数2: 值2
                },
                success: function(res2){
                    // res2是请求2的响应结果
                    $.ajax({
                        url: '请求3的地址',
                        type: 'post',
                        data: {
                            // 参数1是请求2的响应结果
                            参数1: res2,
                            参数2: 值2
                        },
                        success: function(res3){
                            // res3是最终请求的结果
                            console.log(res3)
                        }
                    })
                }
            })
        }
    })

这样的代码就出现了js编程里面的著名回调地狱问题，为了解决这个问题我们需要利用es2015的promise和es2016的await来解决（代码片段3）

点击查看代码片段3

    // 代码片段3
    // await不能写在同步的代码里面，会阻塞整个程序的进程，只能写在异步的代码里面
    // async可以修饰一个函数让这个函数变成一个异步的函数
    async function getRes(){
        // $.ajax() 返回的是一个promise对象
        // await可以等待一个promise状态结束，拿到响应的结果
        const res1 = await $.ajax({
            url: '请求1的地址',
            type: 'post',
            data: {
                参数1: 值1,
                参数2: 值2
            }
        })
        const res2 = await $.ajax({
            url: '请求2的地址',
            type: 'post',
            data: {
                参数1: res,
                参数2: 值2
            }
        })
        const res3 = await $.ajax({
            url: '请求3的地址',
            type: 'post',
            data: {
                参数1: res2,
                参数2: 值2
            }
        })
    }
    // 调用异步函数
    getRes()

利用promise和await就可以将之前的回调嵌套地狱改成同步的代码方式，但是这里面大家要注意await的使用事项，await不允许出现在同步代码块里面，会阻塞同步代码执行，必须写在异步的代码块里面，加async让getRes函数成为一个异步的函数，这样getRes执行不会阻塞全局，getRes函数内部代码就是一个同步的方式执行，就解决了回调嵌套的问题。本来故事到这里就该说goodBye了，但是现在很多面试，尤其是一些大厂的面试要求我们自己实现promise和await，这章节先给大家实现promise。

Promise的封装

1. promise的介绍和使用

状态(state)
- pending
  - promise的初始状态，并且此状态可以转换成fulfilled和rejected
- fulfilled
  - promise的成功状态，不可以转换其他状态，并且必须有一个不可改变的最终值value
- rejected
  - promise的失败状态，不可以转换其他状态，并且必须有一个不可改变的原因reason
术语
- 解决（fulfill）
  
  当调用resolve方法时promise的状态变成fulfill
- 拒绝（reject）
  
  当调用reject方法时promise的状态变成reject
- 终值（value）
  
  所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 promise 有一次性的特征，因此当这个值被传递时，标志着 promise 等待态的结束，故称之终值，有时也直接简称为值（value）。
- 拒因（reason）
  
  也就是拒绝(失败)的原因，指在 promise 被拒绝时传递给拒绝回调的值。
面向对象编程方式
- Promise是面向对象编程方式，对应的构造函数是 Promise
- 使用Promise的时候需要创建一个实例对象，使用实例对象的方法
- Promise构造函数实例化的时候需要传递一个函数(handler),此函数里面可以接收两个参数，一个函数叫做resolve,一个函数叫做reject
- 调用resolve时候promise实例的状态变为 fulfilled
- 调用reject时候promise实例的状态变为 rejected
- 此处要注意一个promise实例只有一个状态，也就是不能同时调用resolve和reject

点击查看代码

    // promise01就是实例化Promise构造函数得到的实例对象
    const promise01 = new Promise((resolve,reject)=>{
        // 此处调用resolve时promise状态会变成fulfilled
        // 此处调用reject时promise状态会变成rejected
    })

实例对象的方法
- then方法
  - 该方法有两个参数，可选，分别对应onFulfilled,onRejected
  - 当状态为fulfilled时，调用onFulfilled,得到一个终值 value
  - 当状态为rejected时，调用onRejected,得到一个拒因 reason
- catch方法
  - 该方法有一个参数，可选，对应onRejected
  - 当状态为rejected时，调用onRejected,得到一个拒因
- finally方法
  - 该方法有一个参数，可选
  - 该方法无论是promise状态成功还是失败都会调用
- 注意：
  1. 实例方法可以实现链式调用，因为每一次方法调用完成之后都会返回一个promise实例
  2. then方法可以调用多次

点击查看代码

    const promise01 = new Promise((resolve,reject)=>{
    })
    // 使用实例对象方法 链式调用
    promise01.then(
        // onFulfilled
        function(value){
            // 当promise实例的状态为fulfilled调用
        },
        // onRejected
        function(reason){
            // 当promise实例的状态为rejected调用
        }  
    ).then(
        // then方法可以调用多次
        // 并且调用可以不传递参数
    ).catch(function(reason){
            // 当promise实例的状态为rejected调用
    }).finally(function(){
        // 无论promise实例的状态为fulfilled或者rejected都会调用
    })

2. 实现手写Promise

实现Promise的构造函数

构造函数需要参数，参数必须是一个函数类型这里面我们叫做handler，这儿会对handler类型进行验证，如果不是函数类型会抛出类型异常
handler函数需要两个形式参数对应的是类自身的两个方法
- resolve方法
  - 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
  - 调用方法promise的状态变为fulfilled
  - 调用该方法会得到一个终值value
  - 该方法可能异步调用
  - 该方法里面会用到实例的this，在调用的时候需要改变this的指向
- reject方法
  - 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
  - 调用方法promise的状态变为rejected
  - 调用该方法会得到一个拒因reason
  - 该方法可能异步调用
  - 该方法里面会用到实例的this，在调用的时候需要改变this的指向
实例里面属性
- value 终值
- reason 拒因
- state 状态
  - 状态可以作为静态的属性，也可以作为实例的属性
  - 状态会多次用于判断，所以建议用常量保存
实例里面的方法
- then
- catch
- finally
类自身的方法
- resolve
- reject

    // promise.js
    // 状态会多次用于判断，所以建议用常量保存
    const PENDING = 'pending'
    const FULFILLED = 'fulfilled'
    const REJECTED = 'rejected'
    class Promise{
        constructor(handler){
            // 构造函数需要参数，参数必须是一个函数类型 这里面我们叫做handler，这儿会对handler类型进行验证，如果不是函数类型会抛出类型异常
            if(typeof handler !== 'function'){
                throw new TypeError(`Promise构造函数的参数${handler}不是一个函数`)
            }
            this.state = PENDING // 用来存储promise的状态 初始化状态为pending
            this.reason = undefined // 拒因
            this.value = undefined // 终值
            // resolve,reject方法里面会用到实例的this，在调用的时候需要改变this的指向
            handler(this.resolve.bind(this), this.reject.bind(this))
        }
        resolve(value){
            // 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
            if(this.state !== PENDING) return
            // 调用方法promise的状态变为fulfilled
            this.state = FULFILLED
            // 调用该方法会得到一个终值value
            this.value = value
        }
        reject(reason){
            // 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
            if(this.state !== PENDING) return
            // 调用方法promise的状态变为rejected 
            this.state = REJECTED
            // 调用该方法会得到一个拒因reason
            this.reason = reason
        }
    }

    // 试错
    const p = new Promise(1)
    console.log(p)
    // promise.js:9 Uncaught TypeError: Promise构造函数的参数1不是一个函数
    // 正确操作
    // 状态成功
    const p = new Promise((resolve, reject) => {
        resolve()
    })
    console.log(p)
    // Promise {state: 'fulfilled', reason: undefined, value: undefined}
    // 状态失败
    const p = new Promise((resolve, reject) => {
        reject()
    })
    console.log(p)
    // Promise {state: 'rejected', reason: undefined, value: undefined}

实现实例then方法

then方法接受两个参数，两个参数类型是函数

onFulfilled
- 需要对onFulfilled类型进行验证，如果不是一个函数就设置为默认函数function(value){return value}，这个函数是获取终值
- 该函数在promise状态为fulfilled时候调用，传入终值
onRejected
- 需要对onRejected类型进行验证，如果不是一个函数就设置为一个默认函数function(err){throw err}，这个函数是获取拒因
- 该函数在promise状态为rejected时候调用，传入拒因

    // promise.js
        const PENDING = 'pending'
        const FULFILLED = 'fulfilled'
        const REJECTED = 'rejected'
        class Promise{
            constructor(handler){...}
            resolve(value){...}
            reject(reason){...}
            then(onFulfilled, onRejected){
                // 参数可选要进行判断 如果传递不是一个函数 默认一个函数
                onFulfilled = typeof onFulfilled==='function' ? onFulfilled : value => value;
                onRejected = typeof onRejected==='function' ? onRejected : err => {throw err};
                if(this.state === FULFILLED){
                    // 当promise状态为fulfilled时候调用onFulfilled
                    onFulfilled(this.value)
                }
                if(this.state === REJECTED){
                    // 当promise状态为rejected时候调用onRejected
                    onRejected(this.reason)
                }
            }
        }

    // test.js
        // 成功状态
        const p = new Promise((resolve, reject) => {
            resolve('success')
        })
        p.then(
            res => {
                console.log('调用了onFullfilled')
                console.log(res)
            },
            err => {
                console.log('调用了onRejected')
                console.log(err)
            }
        )
        // 控制台输出 调用了onFullfilled sucess


        // 失败状态
        const p = new Promise((resolve, reject) => {
            reject('error')
        })
        p.then(
            res => {
                console.log(res)
            },
            err => {
                console.log(err)
            }
        )
        // 控制台输出 调用了onRejected error


        // handler函数异步调用resolve
        const p = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('success')
            },3000)
        })
        p.then(
            res => {
                console.log('调用了onFullfilled')
                console.log(res)
            },
            err => {
                console.log('调用了onRejected')
                console.log(err)
            }
        )
        // 控制台没有任何内容输出 onFulfilled函数并没有被调用

此时经过测试，目前的promise可以正常的调用，此时针对于同步的调用没有问题，但是在handler里面 resolve 和 reject 大部分情况下都是异步调用的，比如说延迟3s调用，此时then里面的onFulfilled和onRejected是无法执行的，因为then函数在执行的时候promise的状态是pending，onFulfilled和onRejected函数里面是做了判断，没有对pendng状态进行处理，针对于pending状态的需要处理

    // promise.js
    // ...
    class Promise {
        // 用来存储状态成功的回调函数
        // 用来存储状态失败的回调函数
        successCallBack = null
        errorCallBack = null
        constructor(handler) {...}
        resolve(value) {
            // ...
            // 异步调用的时候执行存储的onFulfilled函数,传入终值
            this.successCallBack(this.value)

        }
        reject(reason) {
            // ...
            // 异步调用的时候执行存储的onRejected函数，传入拒因
            this.errorCallBack(this.reason)
        }
        then(onFulfilled, onRejected) {
            // ...
            if (this.state === PENDING) {
                // 当resolve或者reject异步调用，then执行的时候promise状态等待
                // 将onFulfilled和onReject函数存储起来
                this.successCallBack = onFulfilled
                this.errorCallBack = onRejected
            }
        }
    }

    // test.js
    // 异步调用resolve
    const p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('success')
        },3000)
    })
    p.then(
        res => {
            console.log('调用了onFullfilled')
            console.log(res)
        },
        err => {
            console.log('调用了onRejected')
            console.log(err)
        }
    )
    // 3s后控制台输出 调用了onFullfilled  success

此时promise的handler就可以异步调用 resolve或reject,then里面可以获取到终值或据因
then函数支持多次调用，所以此时then的回调函数就不止一个，我们将之前的变量改成数组用来存储then的回调函数

    // promise.js
    // ...
    class Promise {
        // 用数组的方式存储失败和成功的回调函数
        successCallBack = []
        errorCallBack = []
        constructor(handler) {...}
        resolve(value) {
            // ...
            // 遍历数组将所有成功的函数执行
            this.successCallBack.forEach(fn=> fn())
        }
        reject(reason) {
            // ...
            // 遍历数组将所有失败的函数执行
            this.errorCallBack.forEach(fn=>fn())
        }
        then(onFulfilled, onRejected) {
            // ...
            if (this.state === PENDING) {
                // 当resolve或者reject异步调用，then执行的时候promise状态等待
                // 将onFulfilled和onReject函数存储起来
                this.successCallBack.push(()=>{
                    onFulfilled(this.value)
                }) 
                this.errorCallBack.push(()=>{
                    onRejected(this.reason)
                })
            }
        }
    }

测试调用了两次then，状态成功之后两次then的成功回调都会被执行

    // test.js
    // 异步调用resolve
    const p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('success')
        },3000)
    })
    p.then(
        res => {
            console.log('调用了onFullfilled')
            console.log(res)
        },
        err => {
            console.log('调用了onRejected')
            console.log(err)
        }
    )
     p.then(
        res => {
            console.log('调用了onFullfilled01')
            console.log(res)
        },
        err => {
            console.log('调用了onRejected01')
            console.log(err)
        }
    )
    // 3s后控制台输出 调用了onFullfilled  success  调用了onFullfilled01 success

但是目前then不支持链式调用，需要进行链式调用的支持
支持链式调用的条件
1. 只有then函数调用返回一个promise对象，一个新的promise对象newPromise
2. then函数有一个返回值这个返回值result就是新promise的onFulfill或onRejected的值
接下来我们需要判断这个返回值result的类型
1. 一个具体值
2. 一个新的promise
另外我们需要一个函数去处理这种链式调用的问题handlerChainPromise,这个函数接收参数如下
1. result 老的promise的then返回值，作为新promise的onFulfill或onRejected
2. resolve成功处理函数
3. reject失败处理函数

class Promise {
    then(onFulfilled, onRejected) {
        // 每一次调用返回一个promise
        return new Promise((resolve,reject) => {
            // 参数可选要进行判断 如果传递不是一个函数 默认一个函数
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
            onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
            if (this.state === PENDING) {
                // 当resolve或者reject异步调用，then执行的时候promise状态等待
                // 将onFulfilled和onReject函数存储起来
                this.successCallBack.push(() => {
                    let result = onFulfilled(this.value)
                    this.handlerChainPromise(result, resolve, reject)
                })
                this.errorCallBack.push(() => {
                    let result = onRejected(this.reason)
                    this.handlerChainPromise(result, resolve, reject)
                })
            }
            if (this.state === FULFILLED) {
                // 当promise状态为fulfilled时候调用onFulfilled
                let result = onFulfilled(this.value)
                this.handlerChainPromise(result, resolve, reject)
            }
            if (this.state === REJECTED) {
                // 当promise状态为rejected时候调用onRejected
                let result = onRejected(this.reason)
                this.handlerChainPromise(result, resolve, reject)
            }
        })
    }
    handlerChainPromise(result,resolve,reject){
        // 如果返回的是一个promise就调用它的then方法
        // 如果返回的是一个具体值就直接返回值
        if(result instanceof Promise){
            result.then(resolve, reject)
        }else{
            resolve(result)
        }
    }
}

测试代码如下

    // 返回一个具体值（可以使任何类型）
    const p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('success')
        },3000)
    })
    p.then(
        res => {
            return 11
        },
        err => {
            console.log(err)
        }
    ).then(
        res=>{
            console.log(res)
        }
    )
    // 返回一个promsie
    const p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('success')
        },3000)
    })
    p.then(
        res => {
            return new Promise(resolve=>{
                setTimeout(()=>{
                    resolve(22)
                }, 1000)
            })
        },
        err => {
            console.log(err)
        }
    ).then(
        res=>{
            console.log(res)
        }
    )

以上一个完整的promise就封装成功了
完整代码如下

// 状态会多次用于判断，所以建议用常量保存
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class Promise {
    // 用来存储状态成功的回调函数
    // 用来存储状态失败的回调函数
    successCallBack = []
    errorCallBack = []
    constructor(handler) {
        // 构造函数需要参数，参数必须是一个函数类型 这里面我们叫做handler，这儿会对handler类型进行验证，如果不是函数类型会抛出类型异常
        if (typeof handler !== 'function') {
            throw new TypeError(`Promise构造函数的参数${handler}不是一个函数`)
        }
        this.state = PENDING // 用来存储promise的状态 初始化状态为pending
        this.reason = undefined // 拒因
        this.value = undefined // 终值
        // resolve,reject方法里面会用到实例的this，在调用的时候需要改变this的指向
        handler(this.resolve.bind(this), this.reject.bind(this))
    }
    resolve(value) {
        // 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
        if (this.state !== PENDING) return
        // 调用方法promise的状态变为fulfilled
        this.state = FULFILLED
        // 调用该方法会得到一个终值value
        this.value = value
        // 异步调用的时候执行存储的onFulfilled函数,传入终值
        this.successCallBack.forEach(fn => fn())
    }
    reject(reason) {
        // 该方法只能在promise状态为pending的时候调用，如果promise已经有了状态，则不允许调用
        if (this.state !== PENDING) return
        // 调用方法promise的状态变为rejected 
        this.state = REJECTED
        // 调用该方法会得到一个拒因reason
        this.reason = reason
        // 异步调用的时候执行存储的onRejected函数，传入拒因
        this.errorCallBack.forEach(fn => fn())
    }
    then(onFulfilled, onRejected) {
        // 每一次调用返回一个promise
        return new Promise((resolve,reject) => {
            // 参数可选要进行判断 如果传递不是一个函数 默认一个函数
            onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
            onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
            if (this.state === PENDING) {
                // 当resolve或者reject异步调用，then执行的时候promise状态等待
                // 将onFulfilled和onReject函数存储起来
                this.successCallBack.push(() => {
                    let result = onFulfilled(this.value)
                    this.handlerChainPromise(result, resolve, reject)
                })
                this.errorCallBack.push(() => {
                    let result = onRejected(this.reason)
                    this.handlerChainPromise(result, resolve, reject)
                })
            }
            if (this.state === FULFILLED) {
                // 当promise状态为fulfilled时候调用onFulfilled
                let result = onFulfilled(this.value)
                this.handlerChainPromise(result, resolve, reject)
            }
            if (this.state === REJECTED) {
                // 当promise状态为rejected时候调用onRejected
                let result = onRejected(this.reason)
                this.handlerChainPromise(result, resolve, reject)
            }
        })
    }
    handlerChainPromise(result,resolve,reject){
        // 如果返回的是一个promise就调用它的then方法
        // 如果返回的是一个具体值就直接返回值
        if(result instanceof Promise){
            result.then(resolve, reject)
        }else{
            resolve(result)
        }
    }
}

posted @ 2021-10-11 21:00 Mjser 阅读(767) 评论(2) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端面试题之手写promise

前端面试题之Promise问题

前言

Promise的封装

1. promise的介绍和使用

2. 实现手写Promise

公告