当前位置: 首页 > 面试题库 >

请用js实现一个promise的方法

翟缪文
2023-03-14
本文向大家介绍请用js实现一个promise的方法相关面试题,主要包含被问及请用js实现一个promise的方法时的应答技巧和注意事项,需要的朋友参考一下

面试够用版

function myPromise(constructor){
    let self=this;
    self.status="pending" //定义状态改变前的初始状态
    self.value=undefined;//定义状态为resolved的时候的状态
    self.reason=undefined;//定义状态为rejected的时候的状态
    function resolve(value){
        //两个==="pending",保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.value=value;
          self.status="resolved";
       }
    }
    function reject(reason){
        //两个==="pending",保证了状态的改变是不可逆的
       if(self.status==="pending"){
          self.reason=reason;
          self.status="rejected";
       }
    }
    //捕获构造异常
    try{
       constructor(resolve,reject);
    }catch(e){
       reject(e);
    }
}
myPromise.prototype.then=function(onFullfilled,onRejected){
   let self=this;
   switch(self.status){
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}
// 测试代码
var p=new myPromise(function(resolve,reject){resolve(1)});
p.then(function(x){console.log(x)})
//输出1

大厂专供版

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

function Promise(excutor) {
    let that = this; // 缓存当前promise实例对象
    that.status = PENDING; // 初始状态
    that.value = undefined; // fulfilled状态时 返回的信息
    that.reason = undefined; // rejected状态时 拒绝的原因
    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    function resolve(value) { // value成功态时接收的终值
        if(value instanceof Promise) {
            return value.then(resolve, reject);
        }
        // 实践中要确保 onFulfilled 和 onRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。
        setTimeout(() => {
            // 调用resolve 回调对应onFulfilled函数
            if (that.status === PENDING) {
                // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
                that.status = FULFILLED;
                that.value = value;
                that.onFulfilledCallbacks.forEach(cb => cb(that.value));
            }
        });
    }
    function reject(reason) { // reason失败态时接收的拒因
        setTimeout(() => {
            // 调用reject 回调对应onRejected函数
            if (that.status === PENDING) {
                // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
                that.status = REJECTED;
                that.reason = reason;
                that.onRejectedCallbacks.forEach(cb => cb(that.reason));
            }
        });
    }

    // 捕获在excutor执行器中抛出的异常
    // new Promise((resolve, reject) => {
    //     throw new Error('error in excutor')
    // })
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

Promise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    let newPromise;
    // 处理参数默认值 保证参数后续能够继续执行
    onFulfilled =
        typeof onFulfilled === "function" ? onFulfilled : value => value;
    onRejected =
        typeof onRejected === "function" ? onRejected : reason => {
            throw reason;
        };
    if (that.status === FULFILLED) { // 成功态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try{
                    let x = onFulfilled(that.value);
                    resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
                } catch(e) {
                    reject(e); // 捕获前面onFulfilled中抛出的异常 then(onFulfilled, onRejected);
                }
            });
        })
    }

    if (that.status === REJECTED) { // 失败态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onRejected(that.reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }

    if (that.status === PENDING) { // 等待态
        // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
        return newPromise = new Promise((resolve, reject) => {
            that.onFulfilledCallbacks.push((value) => {
                try {
                    let x = onFulfilled(value);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
            that.onRejectedCallbacks.push((reason) => {
                try {
                    let x = onRejected(reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch(e) {
                    reject(e);
                }
            });
        });
    }
};
  • 参考自https://juejin.im/post/5c9c3989e51d454e3a3902b6
 类似资料:
  • 本文向大家介绍用js实现一个加法的方法相关面试题,主要包含被问及用js实现一个加法的方法时的应答技巧和注意事项,需要的朋友参考一下 JavaScript 能表示并进行精确算术运算的整数范围为:[-253-1,253-1]。 只考虑大整数相加的情况(不算0.1+0.2之类的):

  • 本文向大家介绍JS实现一个按钮的方法,包括了JS实现一个按钮的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现一个按钮的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍使用js实现一个数组flat()的方法相关面试题,主要包含被问及使用js实现一个数组flat()的方法时的应答技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍如何简单的实现一个promise?相关面试题,主要包含被问及如何简单的实现一个promise?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: 首先明确什么是promiseA+规范,参考规范的地址:primise A+规范 如何实现一个promise,参考我的文章: 实现一个完美符合Promise/A+规范的Promise 一般不会问的很详细,只要能写出上述文章中的v1.0版本

  • 本文向大家介绍js使用Promise实现简单的Ajax缓存,包括了js使用Promise实现简单的Ajax缓存的使用技巧和注意事项,需要的朋友参考一下 业务场景 在不少业务场景下,我们需要实现简单的请求缓存(即某个请求只发起一次请求),例如上传 Token 的获取、获取配置的接口等。 这些接口可以通过 Promise 实现简单的缓存并能够控制更新,而不需要另外引入缓存层。 示范代码 用七牛上传作例

  • 本文向大家介绍用js实现一个轮播图,并简述有哪些实现的方法相关面试题,主要包含被问及用js实现一个轮播图,并简述有哪些实现的方法时的应答技巧和注意事项,需要的朋友参考一下 https://imageslidermaker.com/v2