手写一个自己的Promise（二）

最新推荐文章于 2024-11-08 14:35:14 发布
最新推荐文章于 2024-11-08 14:35:14 发布
阅读量930 收藏 14
点赞数 22
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45231569/article/details/139159933
版权

系列文章目录

根据PromiseA+规范，自己手动实现一个Promise

文章目录

前言

在上一篇文章中，我们已经实现了MyPromise构造器部分的相关代码，本篇文章则着重实现then方法的回调执行时机

一、then方法

根据promise A+规范中的描述总结，大致归纳为下述内容

  • onFulfilled（可选）：一个在此 Promise 对象被兑现时异步执行的函数。它的返回值将成为 then() 返回的Promise对象的兑现值。此函数被调用时将传入参数value（代表Promise 对象的兑现值）。
  • onRejected（可选）：一个在此Promise 对象被拒绝时异步执行的函数。它的返回值将成为 catch() 返回的 Promise对象的兑现值。此函数被调用时将传入参数reason（表示Promise 对象被拒绝的原因）。
  • 返回值：立即返回一个新的 Promise 对象。

二、开始手动实现

思路：
首先，创建一个then方法，它接收两个函数作为参数，分别是onFulfilled和onRejected，之后返回一个MyPromise实例，在实例中，通过判断此时MyPromise的状态是成功态（resolve）还是失败态（reject）来决定具体是执行onFulfilled还是onRejected，无论执行哪个回调，都会将当前promise的结果作为参数传进去。
根据上述思路可以完成下面的代码

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
    }

    then(onFulfilled, onRejected) {  // onFulfilled和onRejected是外部通过then方法传入的成功与失败对应的执行函数
        return new MyPromise((resolve, reject) => { // resolve与reject是当前返回的MyPromise实例的成功与失败回调
            if (this.#state === FULFILLED) { // 如果是成功，执行onFulfilled函数
                onFulfilled(this.#result)
            } else if (this.#state === REJECTED) // 如果是失败，执行onRejected函数
                onRejected(this.#result)
        })
    }
}

根据上述思路执行一下代码，会发现控制台能够正常输出的。（状态是pending没变化是正常的，因为还没写到修改状态的步骤）
此时控制台的输出结果
但如果此时是异步传入结果呢？
请添加图片描述

通过一个setTimeout将resolve包裹起来就会发现，控制台没有输出了，这是因为是此时是异步传入结果，所以当知道可以具体执行哪个回调函数时，then方法的执行早就已经结束了，自然也就没办法再次执行具体的回调函数了。

解决思路：
要解决上面的问题也很简单，就是在then方法中不再直接执行具体的回调，而是先定义一个参数handlers将onFulfilled, onRejected,resolve与reject四个回调函数保存起来，等得知具体执行结果后再根据情况进行调用，如图中所示，值得注意的是，因为then方法可以进行多次调用，因此将handlers属性设置为一个数组会更为合适。此外，再额外定义一个run方法专门用于执行then方法中传递的回调，而在改变状态的changeState方法与then方法中调用这个run方法即可。
请添加图片描述

根据思路可以将代码完善如下

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    #handlers = []  // 定义一个参数handler数组，用来存储then方法中传入的回调函数

    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        // 占位
    }

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
        this.#run()  // 执行定义好的run方法，以确保能执行then方法中异步传入结果的回调函数也能正常执行
    }

    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlers.push({ // 向handlers数组中添加then方法中传入的每一组回调函数
                onFulfilled, onRejected, resolve, reject
            })
            this.#run()  // 直接执行
        })
    }
}

实现了上述逻辑后，就该具体分析一下run方法内应该如何执行了，首先判断此时Promise的状态，如果还是pending，说明还没进行过状态变更，后续代码不用执行，直接返回即可；如果状态不再是pending，此时，对handlers进行循环遍历，依次取出handlers数组中的每一项，再根据当前Promise的状态来决定是执行onFulfilled还是onRejected，同时将Promise的结果作为函数的参数传入。

class MyPromise {

    ...
    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                onFulfilled(this.#result)
            } else if (this.#state === REJECTED) {
                onRejected(this.#result)
            }
        }
    }
	...
}

好了，先执行一下，看看结果如何，首先是成功的回调
1秒钟后成功输出，没有问题
再看一下失败的情况1秒钟后也成功输出，没有问题
成功和失败的回调均能正常输出，没有问题，接下来改判断then方法中返回的Promise的状态了。（解决上图中MyPromise状态一直是pending）

代码写到这里。其实出现了三种情况，分别是：

  1. 外界调用then方法时，传递的回调onFulfilled和onRejected不是函数
  2. 外界调用then方法时，传递的回调onFulfilled和onRejected不是函数

逐个情况分析一下，首先第一种情况，当外部调用时传递的不是一个函数，比如是个字符串或者null，或者干脆什么也不传，根据ES6实现的Promise来看，此时返回的Promise的状态应该和调用then方法的Promise状态和结果保持一致，（也被称为Promise的穿透性）根据这种情况，我们可以在实现时判断，如果onFulfilled或onRejected不是一个函数时，判断此时MyPromise的状态，如果是成功态，则直接执行resolve，将此时的结果作为参数传入；如果是失败态，也直接调用reject函数，将结果作为原因传入，实现代码如下。

class MyPromise {

    ...
    // 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                if(typeof onFulfilled === 'function'){
                	onFulfilled(this.#result)
                }else{
					resolve(this.#result)
				}
            } else if (this.#state === REJECTED) {
                if(typeof onFulfilled === 'function'){
                	onRejected(this.#result)
                }else{
					reject(this.#result)
				}
            }
        }
    }

接下来就是第二种情况，即onFulfilled或onRejected是一个函数时，此时就需要运行这个函数，需要注意的是，此时应该进行判断，看onFulfilled或onRejected在运行过程中是否有报错，如果有报错，则应该执行reject，反正，正常运行则应该执行resolve。因此需要用try…catch包裹住执行函数，在try中正常执行函数，如果没有报错则把函数的返回结果保存下来，执行resolve并把这个返回结果作为resolve的参数传如；在catch中捕获报错，执行reject，并把错误原因作为参数传入reject。

// 定义一个run方法，专门用于根据不同情况，执行then方法中的不同的回调函数
#run() {
    if (this.#state === PENDING) return
    while (this.#handler.length) {
        const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
        if (this.#state === FULFILLED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onFulfilled(this.#result)  // 判断回调函数执行是否报错
                    resolve(data)
                } catch (error) {
                    reject(error)
                }
            } else {
                resolve(this.#result)
            }
        } else if (this.#state === REJECTED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onRejected(this.#result)
                    resolve(data)
                } catch (error) {
                    reject(error)
                }
            } else {
                reject(this.#result)
            }
        }
    }
}

接下来就是最后一种情况了，也就是执行了onFulfilled或onRejected后返回的还是一个Promise，此时具体执行的是resolve还是reject就得看返回的Promise的结果到底是成功还是失败了。因此首先需要检测执行函数返回结果是不是一个Promise，这里定义一个isPromiseLike的辅助函数专门判断处理，当判断返回结果是一个Promise时，调用返回结果的then方法，把resolve和reject方法作为返回结果的then方法的两个回调传进去，如果返回结果的Promise成功，就会调用resolve，失败就会调用reject。

// 判断是否是符合Promise A+规范的promise
#isPromiseLike(value) {
    return false // 先作为占位，之后再实现
}

#run() {
    if (this.#state === PENDING) return
    while (this.#handler.length) {
        const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
        if (this.#state === FULFILLED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onFulfilled(this.#result)
                    if (this.#isPromiseLike(data)) {  // 判断返回结果是否是一个Promise
                        data.then(resolve,reject)  // 是就执行返回结果的then方法
                    } else {
                        resolve(data)
                    }
                } catch (error) {
                    reject(error)
                }
            } else {
                resolve(this.#result)
            }
        } else if (this.#state === REJECTED) {
            if (typeof onFulfilled === 'function') {
                try {
                    const data = onRejected(this.#result)
                    if (this.#isPromiseLike(data)) {
                        data.then(resolve, reject)
                    } else {
                        resolve(data)
                    }
                } catch (error) {
                    reject(error)
                }
            } else {
                reject(this.#result)
            }
        }
    }
}

写到这里，我们会发现run方法中if与else if内的两中情况逻辑高度相似，完全可以抽离成一个单独的方法runOne，抽离后的代码如下。

#runOne(callback, resolve, reject) {  // callback 回调函数（onFulfilled||onRejected）
        if (typeof callback !== 'function') {  // 判断传入的回调函数是否是函数，不是则走穿透逻辑
            const settled = this.#state === FULFILLED ? resolve : reject // 定义一个变量settled，根据当前的state判断此次应该执行什么函数
            settled(this.#result)
            return;  // 确定不是函数，后面的逻辑也不会再走了
        }
        try {  
            const data = callback(this.#result)
            if (this.#isPromiseLike(data)) { // 回调函数正常执行且回调函数的返回结果是个Promise，需要调用返回结果的then方法，并把resolve和reject传进去，由返回结果的Promise判断应该执行哪个
                data.then(resolve, reject)
            } else {
                resolve(data)  // 回调函数正常执行且回调函数的返回结果不是个Promise，执行resolve
            }
        } catch (error) { 
            reject(error)   // 捕获到了回调函数执行时抛出的错误，此时无论state是什么都会执行reject
        }
    }

    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                this.#runOne(onFulfilled, resolve, reject) // 成功传递onFulfilled
            } else if (this.#state === REJECTED) {
                this.#runOne(onRejected, resolve, reject)// 失败传递onRejected
            }
        }
    }

逻辑抽离完成了，接下来改完善之前定义的用于判断是否是Promise的辅助函数。
根据Promise A+规范，不管是对象还是函数，只要它包含了一个叫做then的函数的属性,都可以叫Promise，因此判断方法也很简单

#isPromiseLike(value){
    if (value && (typeof value === 'object' || typeof value === 'function')) {
        return typeof value.then==='function'
    }
    return false
}

PS：为什么这里需要这个辅助函数而不是直接采用 data instanceof MyPromise进行判断呢？
答案：因为判断一个东西是否是Promise，应该是看它是不是满足Promise A+规范，Promise之间应该具有互操作性，比如ES6的Promise和我们创建的MyPromise直接就应该可以互相操作，但如果直接用 data instanceof MyPromise判断一个由ES6创建的Promise时，这个结果肯定是false，反之，如果用 data instanceof MyPromise判断一个由MyPromise创建的Promise时，结果也肯定是false，但实际上这两种情况都应该返回true才对，因此用instanceof判断无法满足这里的需要。

功能大致实现了，但还有一点需要注意，运行then方法中的回调应该是放在微队列里的，因此还需要一个辅助函数实现将方法放入微队列的功能，这里定义一个runMicroTask，具体实现逻辑参考vue源码，分成三种情况

  • node环境：用process.nextTick模拟微队列
  • 浏览器：用MutationObserver模拟微队列
  • 既不在浏览器也不在node环境，此时没办法了，因为微队列是环境提供的能力，脱离环境JS是无法实现的，因此只能用setTimeout作为替代
// 将任务放入异步队列里
    #runMicroTask(func) {
        if (typeof process === 'object' && typeof process.nextTick === 'function') {  // 模拟node环境微队列执行
            process.nextTick(func)
        } else if (typeof MutationObserver === 'function') {  // 模拟浏览器环境的微队列执行
            const ob = new MutationObserver(func)  // MutationObserver是一个观察器，它会自动将一个回调函数放入微队列
            const textNode = document.createTextNode('1')  // 构建一个文本节点用于观察器观察
            ob.observe(textNode, {  // 指定观察器观察的节点
                characterData: true // 观察字符的变化
            })
            textNode.data='2'  // 手动修改文本节点，当被观察的对象发生变化时，观察器会把回调放入微队列执行，从而实现模拟微队列
        } else {
            setTimeout(func, 0)  // 既不是node环境也不是浏览器，只能用setTimeout来实现异步了
        }
    }

	... 
	
    #runOne(callback, resolve, reject) { 
        this.#runMicroTask(() => {  // 将之前的逻辑通过一个箭头函数的形式放入runMicroTask实现模拟放入微队列
            if (typeof callback !== 'function') {  
                const settled = this.#state === FULFILLED ? resolve : reject 
                settled(this.#result)
                return; 
            }
            try {
                const data = callback(this.#result)
                if (this.#isPromiseLike(data)) { 
                    data.then(resolve, reject)
                } else {
                    resolve(data)  
                }
            } catch (error) {
                reject(error)   
            }
        })
    }
	...

ok，全部写完，找几个结果测试一下
请添加图片描述
成功在1秒后输出，状态也发生了改变

请添加图片描述
请添加图片描述

输出顺序也没有问题。

至此，基于Promise A+规范的MyPromise代码全部完成。Promise的其余方法，如catch,finally,resolve,reject,all等方法，这些都是ES6中额外加入的，Promise A+规范中并未对这些方法的实现有提及，因此这些方法的实现放在下一篇文章中。

总结

本篇文章，着重对MyPromise中的then方法的执行时机和返回结果进行了实现，并完成了检测是否是Promise和实现微队列效果的两个辅助函数。

最后，附上MyPromise的完整代码

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {

    #state = PENDING
    #result = undefined

    #handler = []

    // 判断是否是符合Promise A+规范的promise
    #isPromiseLike(value) {
        if (value && (typeof value === 'object' || typeof value === 'function')) {
            return typeof value.then === 'function'
        }
        return false
    }

    // 将任务放入异步队列里
    #runMicroTask(func) {
        if (typeof process === 'object' && typeof process.nextTick === 'function') {  // 模拟node环境微队列执行
            process.nextTick(func)
        } else if (typeof MutationObserver === 'function') {  // 模拟浏览器环境的微队列执行
            const ob = new MutationObserver(func)  // MutationObserver是一个观察器，它会自动将一个回调函数放入微队列
            const textNode = document.createTextNode('1')  // 构建一个文本节点用于观察器观察
            ob.observe(textNode, {  // 指定观察器观察的节点
                characterData: true // 观察字符的变化
            })
            textNode.data='2'  // 手动修改文本节点，当被观察的对象发生变化时，观察器会把回调放入微队列执行，从而实现模拟微队列
        } else {
            setTimeout(func, 0)  // 既不是node环境也不是浏览器，只能用setTimeout来实现异步了
        }
    }

    #runOne(callback, resolve, reject) {  // callback 回调函数（onFulfilled||onRejected）
        this.#runMicroTask(() => {  // 将之前的逻辑通过一个箭头函数的形式放入runMicroTask实现模拟放入微队列
            if (typeof callback !== 'function') {  // 判断传入的回调函数是否是函数，不是则走穿透逻辑
                const settled = this.#state === FULFILLED ? resolve : reject // 定义一个变量settled，根据当前的state判断此次应该执行什么函数
                settled(this.#result)
                return;  // 确定不是函数，后面的逻辑也不会再走了
            }
            try {
                const data = callback(this.#result)
                if (this.#isPromiseLike(data)) { // 回调函数正常执行且回调函数的返回结果是个Promise，需要调用返回结果的then方法，并把resolve和reject传进去，由返回结果的Promise判断应该执行哪个
                    data.then(resolve, reject)
                } else {
                    resolve(data)  // 回调函数正常执行且回调函数的返回结果不是个Promise，执行resolve
                }
            } catch (error) {
                reject(error)   // 捕获到了回调函数执行时抛出的错误，此时无论state是什么都会执行reject
            }
        })
    }

    #run() {
        if (this.#state === PENDING) return
        while (this.#handler.length) {
            const { onFulfilled, onRejected, resolve, reject } = this.#handler.shift()
            if (this.#state === FULFILLED) {
                this.#runOne(onFulfilled, resolve, reject) // 成功传递onFulfilled
            } else if (this.#state === REJECTED) {
                this.#runOne(onRejected, resolve, reject)// 失败传递onRejected
            }
        }
    }

    constructor(executor) {
        const resolve = (data) => {
            this.#changeState(FULFILLED, data)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    #changeState(state, result) {
        if (this.#state !== PENDING) return
        this.#state = state
        this.#result = result
        this.#run()
    }

    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handler.push({
                onFulfilled, onRejected, resolve, reject
            })
            this.#run()
        })
    }
}
梦想的奢望
关注
教你如何手写一个Promise
ose_huang的博客
02-25 9704
promise的进阶，手写一个自己的promise
300秒带你手写一个promise
小陈的博客
05-18 6118
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
自己写一个Promise
anhuyong5631的博客
04-30 109
参考Promise 的 官方规范https://promisesaplus.com/ Promise 其实就是一个状态机 它只有两种状态变化 pending =》 fulfilled 　　　　　　　　　pending =》 rejected 并且状态一旦发生变化后就不会再改变 我们用es5来实现下 先写个架子， 并测试下： function m...
自己动手写Promise
weixin_34324081的博客
08-24 158
自己动手写Promise 相信作为一名JSer，大家如今肯定都对Promise的使用非常熟悉了。Promise的出现，大大改善了js代码『回调地狱』的问题，再结合async/await等语法特性，可以让JS书写简洁优美、可读性高的异步代码。 在Promise规范化的路上，社区的贡献可谓至关重要。早期各种版本的Promise库最终推动了Promises/A+规范的达成，并最终被纳入语言规范。如今随着...
手写一个自己的Promise
qq_38011050的博客
09-18 670
常言道：“知其然，更要知其所以然” 所谓JS本身是“函数式，异步”编程（回调地狱，你懂的），Promise得出现，让JS写起来好像是“同步编程”得感觉了！ 下面是基于我自己对Promise得理解，用ES6语法写了一个Promise // 既然Promise使用得时候是通过new得到的，那么首先分析出Promise是一个类 class Promise2 { // Promise接收一个回调函...
自己动手写 Promise | 全网最清晰简洁
renzhezixuan的博客
04-18 264
手写 Promise，深入理解 node.js 事件循环与异步机制
JS手写一个自定义Promise操作示例
11-21
在本实例中，我们将学习如何手写一个自定义的Promise，即`MyPromise`。 首先，我们创建了一个名为`MyPromise`的类，它接受一个`executor`函数作为参数。`executor`函数会在Promise实例创建后立即执行，并且它有两个...
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
手写Promise，我们需要创建一个构造函数，接收一个执行器函数作为参数。这个执行器函数内部有两个参数，即resolve和reject，它们是用于改变Promise状态的函数。 ```javascript function Promise(executor) { // ...
手写实现一个自己的promise
大香蕉的博客
12-09 619
实现内容： 1、then方法：当resolve时会触发then方法 2、catch方法：当reject时会触发catch方法 3、promise.resolve()：直接生成一个成功状态的promise对象 4、promise.reject()：直接生成一个失败状态的promise对象 5、Promise.all()：参数为promise对象数组，等待所有状态都不为pending 6、Promise...
自己实现Promise
笔记搬运工
04-28 430
自己实现了Promise和request class MyPromise{ constructor(fun){ if(typeof fun !== 'function'){ throw new Error('need function!'); } this.state = 'PENDING'; this...
手写Promise
XunLin233的博客
05-30 2017
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
自己如何实现promise？
weixin_33953384的博客
03-15 594
如果让你实现一个 promise ,你会怎么做？ 自己实现promise的大体思路 我们要明确我们需要一个异步的操作方法,满足异步回调。所以选择加入setTimeout 作为实现的基础， 让函数实现延迟触发。 保持一个原则，控制 promise 改变状态的只有 promise 构造函数里的 reslove 、 reject 函数。 链...
手写一个简单的Promise
u011393161的博客
11-22 3522
今天突发奇想，想自己写个Promise来玩，一说要写还真反应不过来怎么开始，总之先看看Promise是怎么用的好了。 let pp= new Promise((resolve, reject) => { resolve('done'); }); pp.then((value) => { console.log(value); }).catch((e)=>{ cons...
Promise
qj6837的博客
09-05 189
Promise 是异步编程的一种解决方案。它解决了ajax请求过程中回调地狱的问题，令代码更具有可读性。 Promise对象是一个构造函数，用来生成Promise实例。 const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value)...
自己写一个 Promise 的实现
茶儿啤酒的博客
02-02 548
启发自一月份的时候参加的某司的前端面试，当时我在和面试官聊项目经历的时候，谈到了Promise，引出了面试官此后长达半小时的对“如何用ES5的语法实现Promise”的灵魂拷问。因为答得不理想，所以今天就来补补课。 首先，来回顾一下Promise。Promise是ES6中提供的一个对象，能以同步、顺序的语句表达异步的操作。 MDN开发者文档对于Promise的描述：Promise - JavaSc...
Echarts 折线图
weixin_44443380的博客
11-08 252
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
最新发布
不熬夜的臭宝的博客
11-08 604
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 394
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
手写一个promise
03-20
很高兴为您提供一个手写的 Promise 实现，代码如下： class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值