手动封装一个promise，完整思路

最新推荐文章于 2024-05-23 11:18:33 发布
最新推荐文章于 2024-05-23 11:18:33 发布
阅读量1.3k 收藏 7
点赞数
分类专栏： 前端进阶笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42738504/article/details/116207226
版权

在阅读本篇文章之前，建议先阅读我的上一篇关于promise/A+规范的文章，方便与理解和掌握promise的实现思路与规范
平常我们用promise都是用new promise(),所以我们自己手写也应该用构造函数或者class类来实现，这里将用class来实现

  class MPromise {
        constructor() {

        }
    }

promise有三种状态，pending，fulfilled（resolved），rejected。这三种状态有两个特性。

  1. 初始状态为pending，状态唯一
  2. 一旦状态从pending=>fulfilled或者是pending=>rejected，状态将不可再次更改

我们给MPromise加上这三个常量状态值，并且定义初始值status来表示MPromise的状态

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
 class MPromise {
        constructor() {
            // 初始状态为pending
            this.status = PENDING;
        }
    }

一般的promise有两个回调resolve和reject方法

  1. 根据promise/A+规范，这两个方法是要更改status的，从pending改到fulfilled/rejected。
  2. 注意两个函数的入参分别是value和reason。
 class MPromise {
        constructor() {
            // 初始状态为pending
            this.status = PENDING;
            //成功回调value
            this.value = null;
            //失败回调reason
            this.reason = null;
        }
        resolve(value) {
            if (this.status === PENDING) {
                this.status = FULFILLED;
                this.value = value;
            }
        }
        reject(reason) {
            if (this.status === PENDING) {
                this.status = REJECTED;
                this.reason = reason;
            }
        }
    }

到这一步，小伙伴们是不是发现了我们得promise少了入参，我们来补充一下

  1. 入参是一个函数，函数接受resolve和reject两个参数
  2. 注意在初始化promise的时候，就要执行这个函数，并且有任何报错都要通过reject抛出去
class MPromise{
	constructor(fun){
		this.status=PENDING;
		this.value=null;
		this.reason=null;
		//如果两个方法都没调用,调用reject,把status改成REJECTED
		try{
			fn(this.resolve.bind(this),this.reject.bind(this));
		}catch(e){
		this.reject(e);
		}
	}
	resolve(value){
	//状态唯一，且只能从PENDING到FUFILLED,所以这里加判断
		if(this.status==='PENDING'){
			this.status='FUFILLED';
			this.value=value;
		}
	}
	reject(reason){
		if(this.status==='PENDING'){
			this.status='REJECTED';
			this.reason=reason;
		}
	}
}

两个改变MPromise状态的方法已经实现了，接下来实现以下关键的then方法

  1. then接收两个参数，onFulfilled和onRejected
then(onFulfilled,onRejected){}

检查并处理参数，之前提到的不是function，则忽略，这个忽略指的是原样返回value或者reason。
这里我们定义一个可以判断参数类型的方法isFunction

isFunction(param){
	return typeof param==='function';
}
then(onFulfilled,onRejeted){
	const fulFilledFn=this.isFunction(onFulfilled)?onFulfilled:(value)=>{return value};
	const rejectedFn=this.isFunction(onRejected)?onRejected:(reason)=>{throw reason}
	//根据当前的promise的状态，调用不同的参数
	switch(this.status){
		case FULFILLED:{
			fulFilledFn(this.value);
			break;
		}
		case REJECTED:{
			rejectedFn(this.reason);
			break;
		}
		//因为promise是异步，如果这么写，当then方法一调用，就会瞬间执行，此时，status很有可能还是pending。
		//我们首先得拿到所有的回调，然后才能在某个时机去执行他，这里我们新建两个数组，来分别储存成功和失败回调，调用then的时候，如果还是pending则存入数组。
		case PENDING:{
			this.FULFILLED_CALLBACK_LIST.push(realOnFulfilled);
			this.REJECTED_CALLBACK_LIST.push(realOnRejected);
			break;
		}
	}
}

在status发生变化的时候，就执行所有的回调，这里我们用一下es6的getter和setter，更为地符合语义，当status改变时，去做什么事。(当然也可以顺序执行，在给status赋值后，下面再加一行forEach)

get status(){
	return this._status;
}
set status(newStatus){
	switch(newStatus){
		case FULFILLED:{
			this.FULFILLED_CALLBACK_LIST.forEach(callback=>{
				callback(this.value);
			})
			break;
		}
		 case REJECTED: {
                    this.REJECTED_CALLBACK_LIST.forEach(callback => {
                        callback(this.reason);
                    });
                    break;
                }
	}
}

如果onFulfilled不是函数，且promise成功执行，promise2必须成功执行并返回相同的值

 const fulFilledFnWithCatch = (resolve, reject) => {
            try {
                fulFilledFn(this.value);
                resolve(this.value);
            } catch (e) {
                reject(e)
            }
        };

如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因。

需要注意的是，如果promise1的onRejected执行成功了，promise2应该被resolve

 const rejectedFnWithCatch = (resolve, reject) => {
        try {
            rejectedFn(this.reason);
            if (this.isFunction(onRejected)) {
                resolve();
            }
        } catch (e) {
            reject(e);
        }
    }

我们接着来处理then函数，此块内容比较多，我们单独来讨论。当onFulfilled或者onRejected抛出一个异常e，则promise2必须执行，并返回拒因e。这就要求我们手动catch代码，遇到报错返回reject

 then(onFulfilled, onRejected) {
        const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
            return value;
        }
        const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
            throw reason;
        };
//fulFilled状态的错误回调
        const fulFilledFnWithCatch = (resolve, reject) => {
            try {
                fulFilledFn(this.value);
            } catch (e) {
                reject(e)
            }
        };
//rejected状态的回调
        const rejectedFnWithCatch = (resolve, reject) => {
            try {
                rejectedFn(this.reason);
            } catch (e) {
                reject(e);
            }
        }

        switch (this.status) {
            case FULFILLED: {
                return new MPromise(fulFilledFnWithCatch);
            }
            case REJECTED: {
                return new MPromise(rejectedFnWithCatch);
            }
            case PENDING: {
                return new MPromise((resolve, reject) => {
                    this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject));
                    this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject));
                });
            }
        }
    }

如果onFulfilled或者onRejected返回一个值x，则运行resolvePromise方法

const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
            try {
                if (!this.isFunction(onFulfilled)) {
                    resolve(this.value);
                } else {
                    const x = fulFilledFn(this.value);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e)
            }
        };

        const rejectedFnWithCatch = (resolve, reject, newPromise) => {
            try {
                if (!this.isFunction(onRejected)) {
                    reject(this.reason);
                } else {
                    const x = rejectedFn(this.reason);
                    this.resolvePromise(newPromise, x, resolve, reject);
                }
            } catch (e) {
                reject(e);
            }
        }

我们来定义一下resolvePromise方法

resolvePromise(newPromise, x, resolve, reject) {
        // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
        // 这是为了防止死循环
        if (newPromise === x) {
            return reject(new TypeError('The promise and the return value are the same'));
        }

        if (x instanceof MPromise) {
            // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
            // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
            // 这个if跟下面判断then然后拿到执行其实重复了，可有可无
            x.then((y) => {
                resolvePromise(newPromise, y, resolve, reject);
            }, reject);
        } else if (typeof x === 'object' || this.isFunction(x)) {
            // 如果 x 为对象或者函数
            // 这个坑是跑测试的时候发现的，如果x是null，应该直接resolve
            if (x === null) {
                return resolve(x);
            }

            let then = null;

            try {
                // 把 x.then 赋值给 then 
                then = x.then;
            } catch (error) {
                // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
                return reject(error);
            }

            // 如果 then 是函数
            if (this.isFunction(then)) {
                let called = false;
                // 将 x 作为函数的作用域 this 调用之
                // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
                // 名字重名了，我直接用匿名函数了
                try {
                    then.call(
                        x,
                        // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
                        (y) => {
                            // 如果 resolvePromise 和 rejectPromise 均被调用，
                            // 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
                            // 实现这条需要前面加一个变量called
                            if (called) return;
                            called = true;
                            resolvePromise(promise, y, resolve, reject);
                        },
                        // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
                        (r) => {
                            if (called) return;
                            called = true;
                            reject(r);
                        });
                } catch (error) {
                    // 如果调用 then 方法抛出了异常 e：
                    // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
                    if (called) return;

                    // 否则以 e 为据因拒绝 promise
                    reject(error);
                }
            } else {
                // 如果 then 不是函数，以 x 为参数执行 promise
                resolve(x);
            }
        } else {
            // 如果 x 不为对象或者函数，以 x 为参数执行 promise
            resolve(x);
        }
    }

因为onFulfilled 和 onRejected 是微任务，所以我们应该用queueMicrotask包裹执行函数

 const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
            queueMicrotask(() => {
                try {
                    if (!this.isFunction(onFulfilled)) {
                        resolve(this.value);
                    } else {
                        const x = fulFilledFn(this.value);
                        this.resolvePromise(newPromise, x, resolve, reject);
                    }
                } catch (e) {
                    reject(e)
                }
            })
        };

        const rejectedFnWithCatch = (resolve, reject, newPromise) => {
            queueMicrotask(() => {
                try {
                    if (!this.isFunction(onRejected)) {
                        reject(this.reason);
                    } else {
                        const x = rejectedFn(this.reason);
                        this.resolvePromise(newPromise, x, resolve, reject);
                    }
                } catch (e) {
                    reject(e);
                }
            })
        }

有then方法，我们这里再加一个catch方法，贴切我们原生的promise

catch (onRejected) {
        return this.then(null, onRejected);
    }

将现有对象转为Promise对象，如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。

static resolve(param) {
        if (param instanceof MyPromise) {
            return param;
        }

        return new MyPromise(function (resolve) {
            resolve(param);
        });
    }

返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason，会被传递给实例的回调函数。

static reject(reason) {
        return new MPromise((resolve, reject) => {
            reject(reason);
        });
    }

刚好，下午听到某只切图仔面试字节跳动，面试官让她手写promise.race方法，这里，我们基于上面封装好的MPromise来简单实现以下promise.race方法。首先，promise.race中

  1. const p = Promise.race([p1, p2, p3]);
  2. 该方法是将多个 Promise 实例，包装成一个新的 Promise 实例。
  3. 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
static race(promiseList){
	return new MPromise(resolve,reject)=>{
		const len=promiseList.length;
		if(len===0){
			return resolve();
		}
		else{
			for(let i=0;i<len;i++){
				MPromise.resolve(promiseList[i]).then(
					(value)=>{
						return resolve(value);
						}
					(reason)=>{
						return reject(reason);
						}
					))
				)
			}
		}
	}
}

完整代码如下

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

class MPromise {

    FULFILLED_CALLBACK_LIST = [];
    REJECTED_CALLBACK_LIST = [];
    _status = PENDING;

    constructor(fn) {
        // 初始状态为pending
        this.status = PENDING;
        this.value = null;
        this.reason = null;

        try {
            fn(this.resolve.bind(this), this.reject.bind(this));
        } catch (e) {
            this.reject(e);
        }
    }

    get status() {
        return this._status;
    }

    set status(newStatus) {
        this._status = newStatus;
        switch (newStatus) {
            case FULFILLED: {
                this.FULFILLED_CALLBACK_LIST.forEach(callback => {
                    callback(this.value);
                });
                break;
            }
            case REJECTED: {
                this.REJECTED_CALLBACK_LIST.forEach(callback => {
                    callback(this.reason);
                });
                break;
            }
        }
    }

    resolve(value) {
        if (this.status === PENDING) {
            this.value = value;
            this.status = FULFILLED;
        }
    }

    reject(reason) {
        if (this.status === PENDING) {
            this.reason = reason;
            this.status = REJECTED;
        }
    }

    then(onFulfilled, onRejected) {
        const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled : (value) => {
            return value;
        }
        const rejectedFn = this.isFunction(onRejected) ? onRejected : (reason) => {
            throw reason;
        };

        const fulFilledFnWithCatch = (resolve, reject, newPromise) => {
            queueMicrotask(() => {
                try {
                    if (!this.isFunction(onFulfilled)) {
                        resolve(this.value);
                    } else {
                        const x = fulFilledFn(this.value);
                        this.resolvePromise(newPromise, x, resolve, reject);
                    }
                } catch (e) {
                    reject(e)
                }
            })
        };

        const rejectedFnWithCatch = (resolve, reject, newPromise) => {
            queueMicrotask(() => {
                try {
                    if (!this.isFunction(onRejected)) {
                        reject(this.reason);
                    } else {
                        const x = rejectedFn(this.reason);
                        this.resolvePromise(newPromise, x, resolve, reject);
                    }
                } catch (e) {
                    reject(e);
                }
            })
        }

        switch (this.status) {
            case FULFILLED: {
                const newPromise = new MPromise((resolve, reject) => fulFilledFnWithCatch(resolve, reject, newPromise));
                return newPromise;
            }
            case REJECTED: {
                const newPromise = new MPromise((resolve, reject) => rejectedFnWithCatch(resolve, reject, newPromise));
                return newPromise;
            }
            case PENDING: {
                const newPromise = new MPromise((resolve, reject) => {
                    this.FULFILLED_CALLBACK_LIST.push(() => fulFilledFnWithCatch(resolve, reject, newPromise));
                    this.REJECTED_CALLBACK_LIST.push(() => rejectedFnWithCatch(resolve, reject, newPromise));
                });
                return newPromise;
            }
        }
    }

    resolvePromise(newPromise, x, resolve, reject) {
        // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise
        // 这是为了防止死循环
        if (newPromise === x) {
            return reject(new TypeError('The promise and the return value are the same'));
        }

        if (x instanceof MPromise) {
            // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态
            // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y
            x.then((y) => {
                resolvePromise(newPromise, y, resolve, reject);
            }, reject);
        } else if (typeof x === 'object' || this.isFunction(x)) {
            // 如果 x 为对象或者函数
            if (x === null) {
                // null也会被判断为对象
                return resolve(x);
            }

            let then = null;

            try {
                // 把 x.then 赋值给 then 
                then = x.then;
            } catch (error) {
                // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
                return reject(error);
            }

            // 如果 then 是函数
            if (this.isFunction(then)) {
                let called = false;
                // 将 x 作为函数的作用域 this 调用
                // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise
                try {
                    then.call(
                        x,
                        // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise
                        (y) => {
                            // 需要有一个变量called来保证只调用一次.
                            if (called) return;
                            called = true;
                            this.resolvePromise(promise, y, resolve, reject);
                        },
                        // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
                        (r) => {
                            if (called) return;
                            called = true;
                            reject(r);
                        });
                } catch (error) {
                    // 如果调用 then 方法抛出了异常 e：
                    if (called) return;

                    // 否则以 e 为据因拒绝 promise
                    reject(error);
                }
            } else {
                // 如果 then 不是函数，以 x 为参数执行 promise
                resolve(x);
            }
        } else {
            // 如果 x 不为对象或者函数，以 x 为参数执行 promise
            resolve(x);
        }
    }

    catch (onRejected) {
        return this.then(null, onRejected);
    }

    isFunction(param) {
        return typeof param === 'function';
    }

    static resolve(value) {
        if (value instanceof MPromise) {
            return value;
        }

        return new MPromise((resolve) => {
            resolve(value);
        });
    }

    static reject(reason) {
        return new MPromise((resolve, reject) => {
            reject(reason);
        });
    }

    static race(promiseList) {
        return new MPromise((resolve, reject) => {
            const length = promiseList.length;

            if (length === 0) {
                return resolve();
            } else {
                for (let i = 0; i < length; i++) {
                    MPromise.resolve(promiseList[i]).then(
                        (value) => {
                            return resolve(value);
                        },
                        (reason) => {
                            return reject(reason);
                        });
                }
            }
        });

    }
}
胡不说
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
如何利用ES6进行Promise封装总结
10-17
主要介绍了如何利用ES6进行Promise封装总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
NodeJS中利用Promise来封装异步函数
10-24
下面是一个简单的例子，展示了如何使用q库封装一个读取文件的异步操作： ```javascript var q = require('q'); var fs = require('fs'); function readFileAsync(filename) { var defer = q.defer(); fs....
promise 核心封装
Altaird的博客
12-13 745
promise，在项目开发应该大家都不陌生吧，今天我们来看下promise是怎么实现，自己手写一个promise。 首先我们来看封装一个promise需要什么条件 let promise = new Promise((resolve,reject) => {}) console.log(promise) 由上可知，我们看到promise身上有状态，返回值，__proto__上有一些方法，所以我们可以采用class的方式来创建。 // 手写promise class XG { // .
从零开始封装一个Promise
m0_45093055的博客
03-20 2173
一、Promise是什么？ 概念：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 作用：主要通过链式调用解决地狱回调问题 二、手写封装promise及调用 1.封装promise 完整代码如下： const PENDING = 'PENDING', FUILLED = 'FUILLED', REJECTED = 'REJECTED'; function resolvePromise(x,resolve,reject) { // let call
promise自定义封装（手写promise）源码
最新发布
weixin_56048772的博客
05-23 527
实现以下结构的promise自定义封装。
封装一个promise的思路
薇语
11-30 1036
封装一个promise好像不难，只是过程过于繁琐，因此下文只有一些简单的思路。封装promise时写一个方法传递一个函数函数中有两个参数，resolve和reject。然后函数中有一个定义状态的变量（promise中的状态有三种情况），和函数成功和失败返回的值，try和cath执行异常处理，然后定义resolve和reject这两个函数在函数内部分别用定时器setTimeout保证异步执行以及做状态值的判断和状态值的改变以及赋值操作，然后利用原型链的思想编写在该封装的promise下编写then方法。 .
手动封装一个Promise
sinat_36048532的博客
01-24 216
本章来自己开发一个Promise实现，提升异步编程的能力。 首先声明定义类并声明Promise状态与值，有以下几个细节需要注意。 executor为执行者 当执行者出现异常时触发拒绝状态 使用静态属性保存状态值 状态只能改变一次，所以在resolve与reject添加条件判断 因为 resolve或rejected方法在executor中调用，作用域也是executor作用域，这会造成this指向window，现在我们使用的是class定义，this为undefined。 class HD {
Promise 简单封装
wind_z_i的博客
03-19 734
要分装promise先理清思绪 1. 先实现executor的立即执行 2. 实现MyPromise中有两个属性 state， result 3. 实现 executor的两个参数 resolve和reject， 传递给executor 4. resolve和reject调用的时候，能够 state状态改变， result进行保存 5. 实现then方法，onFullfilled onRejected， 如果状态是fulfilled的时候，执行onFulfilled 6. 如果调用then方法的
封装 axios+promise通用请求函数操作
10-14
在本文中，我们将深入探讨如何封装一个基于axios和Promise的通用请求函数，这对于任何Web应用程序的后端数据交互都是至关重要的。axios是一个流行的JavaScript库，用于处理HTTP请求，而Promise则是处理异步操作的一...
小程序api实现promise封装过程解析
10-15
主要介绍了小程序api实现promise封装过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
javascript下使用Promise封装FileReader
10-22
主要介绍了javascript下使用Promise封装FileReader,需要的朋友可以参考下
PromiseA+规范
开发要有产品的思维
01-15 1380
promise规范
Promise/A+ 规范详解：打造健壮异步代码的必备知识（上）
你若盛开，清风自来
12-04 1143
Promise/A+ 规范是一种用于异步编程的规范，它定义了Promise 对象的行为和交互方式。Promise/A+ 规范的背景和重要性如下：背景：在 JavaScript 中，异步编程是一种常见的模式，例如使用回调函数事件监听器发布/订阅模式然而，这些方法存在一些问题，例如回调地狱、难以管理的异步代码流程和错误处理等。Promise/A+ 规范提供了一种更好的方式来处理异步操作，它使用 Promise 对象来表示异步操作的结果，并提供了统一的错误处理和流程控制机制。
promise 请求封装方法
Nightze的博客
09-08 863
promise把请求封装成一个方法，使用封装好的这个方法去请求json数据。
Promise封装公共方法的小技巧，无需try...catch
qq_44212319的博客
11-13 448
Promise封装公共方法的小技巧，无需try...catch
ES6---Promise简析和请求封装
赳赳万里鲲
04-25 7100
1、Promise的特点 &nbsp;&nbsp;&nbsp;&nbsp;a、Promise是异步编程的一种解决方案。 &nbsp;&nbsp;&nbsp;&nbsp;b、Promise的状态不受外部影响，一旦建立就会立即执行，无法中途取消； &nbsp;&nbsp;&nbsp;&nbsp;c、一旦状态发生改变之后就不会改变。 2、Promise状态 &nbsp;&nbsp;&n
手写promise步骤详解（基础封装+链式调用）
一枚不断学习的小码农一枚~
03-06 1093
一、promise 封装 1.基础架构 function myPromise() { let self = this; // 此处 this 代指myPromise 这个函数 self.status = 'pending' // pending => resolve/reject let value = null // 成功时的参数 let reason = null // 失败时的参数 // 成功的回调 fun
封装一个promise的get请求
pigpigbond的博客
08-21 712
封装一个promise的get请求 function get(url) {//封装的方法 return new Promise(function (resole, reject) {//返回promise let xhr = new XMLHttpRequest();//创建XMLHttpResquest对象 xhr.onreadystatechange = function(){//监听xhr对象的5个状态 if(xhr.readyStat
2020-11-12
weixin_47212088的博客
11-12 82
promise封装原生ajax <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
封装一个promise
05-24
可以使用Promise构造函数来创建一个封装好的Promise对象。下面是一个简单的示例： ```javascript function fetchData() { return new Promise((resolve, reject) => { // 异步操作 setTimeout(() => { const data = { message: 'Hello World!' }; resolve(data); }, 1000); }); } fetchData() .then(data => console.log(data)) .catch(error => console.error(error)); ``` 在上面的示例中，`fetchData()` 函数返回一个Promise对象并使用 `resolve()` 和 `reject()` 方法来处理异步操作的结果。调用 `then()` 方法可以获取到异步操作成功时的结果，而调用 `catch()` 方法可以获取到异步操作失败时的错误信息。 你可以将需要封装的异步操作放到Promise构造函数中，并使用 `resolve()` 和 `reject()` 方法来处理异步操作的结果。同时，将该Promise对象作为函数的返回值，即可封装一个Promise。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值