广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现手写promise的示例代码
  • 228

0
分享到

JavaScript实现手写promise的示例代码

JavaScript手写promiseJavaScript promise 2023-05-15 11:05:29 228人浏览 八月长安
摘要

目录背景需求then的链式调用Promise.all背景 promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 pro

背景

promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 promise 的实现过程，这样可以加（面）深（试）理（要）解（考）。

需求

我们先来总结一下 promise 的特性：

使用：

const p1 = new Promise((resolve, reject) => {
  console.log('1');
  resolve('成功了');
})

console.log("2");

const p2 = p1.then(data => {
  console.log('3')
  throw new Error('失败了')
})

const p3 = p2.then(data => {
  console.log('success', data)
}, err => {
  console.log('4', err)
})

以上的示例可以看出 promise 的一些特点，也就是我们本次要做的事情：

  • 在调用 Promise 时，会返回一个 Promise 对象，包含了一些熟悉和方法（all/resolve/reject/then…）
  • 构建 Promise 对象时，需要传入一个 executor 函数，接受两个参数，分别是resolve和reject，Promise 的主要业务流程都在 executor 函数中执行。
  • 如果运行在 excutor 函数中的业务执行成功了，会调用 resolve 函数；如果执行失败了，则调用 reject 函数。
  • promise 有三个状态：pending，fulfilled，rejected，默认是 pending。只能从pending到rejected, 或者从pending到fulfilled，状态一旦确认，就不会再改变；
  • promise 有一个then方法，接收两个参数，分别是成功的回调 onFulfilled, 和失败的回调 onRejected。
// 三个状态：PENDING、FULFILLED、REJECTED
const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class Promise {
  constructor(executor) {
    // 默认状态为 PENDING
    this.status = PENDING;
    // 存放成功状态的值，默认为 undefined
    this.value = undefined;
    // 存放失败状态的值，默认为 undefined
    this.reason = undefined;

    // 调用此方法就是成功
    let resolve = (value) => {
      // 状态为 PENDING 时才可以更新状态，防止 executor 中调用了两次 resovle/reject 方法
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value = value;
      }
    };

    // 调用此方法就是失败
    let reject = (reason) => {
      // 状态为 PENDING 时才可以更新状态，防止 executor 中调用了两次 resovle/reject 方法
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
      }
    };

    try {
      // 立即执行，将 resolve 和 reject 函数传给使用者
      executor(resolve, reject);
    } catch (error) {
      // 发生异常时执行失败逻辑
      reject(error);
    }
  }

  // 包含一个 then 方法，并接收两个参数 onFulfilled、onRejected
  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }

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

调用一下：

const promise = new Promise((resolve, reject) => {
  resolve('成功');
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

这个时候我们很开心，但是别开心的太早，promise 是为了处理异步任务的，我们来试试异步任务好不好使：

const promise = new Promise((resolve, reject) => {
  // 传入一个异步操作
  setTimeout(() => {
    resolve('成功');
  },1000);
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

发现没有任何输出，我们来分析一下为什么：

new Promise 执行的时候，这时候异步任务开始了，接下来直接执行 .then 函数，then函数里的状态目前还是 padding，所以就什么也没执行。

那么我们想想应该怎么改呢？

我们想要做的就是，当异步函数执行完后，也就是触发 resolve 的时候，再去触发 .then 函数执行并把 resolve 的参数传给 then。

这就是典型的发布订阅的模式，可以看我这篇文章。

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    // 存放成功的回调
    this.onResolvedCallbacks = [];
    // 存放失败的回调
    this.onRejectedCallbacks= [];

    let resolve = (value) => {
      if(this.status ===  PENDING) {
        this.status = FULFILLED;
        this.value = value;
        // 依次将对应的函数执行
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    } 

    let reject = (reason) => {
      if(this.status ===  PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        // 依次将对应的函数执行
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    }

    try {
      executor(resolve,reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
      onFulfilled(this.value)
    }

    if (this.status === REJECTED) {
      onRejected(this.reason)
    }

    if (this.status === PENDING) {
      // 如果promise的状态是 pending，需要将 onFulfilled 和 onRejected 函数存放起来，等待状态确定后，再依次将对应的函数执行
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value)
      });

      // 如果promise的状态是 pending，需要将 onFulfilled 和 onRejected 函数存放起来，等待状态确定后，再依次将对应的函数执行
      this.onRejectedCallbacks.push(()=> {
        onRejected(this.reason);
      })
    }
  }
}

这下再进行测试：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  },1000);
}).then(
  (data) => {
    console.log('success', data)
  },
  (err) => {
    console.log('faild', err)
  }
)

1s 后输出了：

说明成功啦

then的链式调用

这里就不分析细节了，大体思路就是每次 .then 的时候重新创建一个 promise 对象并返回 promise，这样下一个 then 就能拿到前一个 then 返回的 promise 了。

const PENDING = 'PENDING';
const FULFILLED = 'FULFILLED';
const REJECTED = 'REJECTED';

const resolvePromise = (promise2, x, resolve, reject) => {
  // 自己等待自己完成是错误的实现，用一个类型错误，结束掉 promise  Promise/A+ 2.3.1
  if (promise2 === x) { 
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  // Promise/A+ 2.3.3.3.3 只能调用一次
  let called;
  // 后续的条件要严格判断 保证代码能和别的库一起使用
  if ((typeof x === 'object' && x != null) || typeof x === 'function') { 
    try {
      // 为了判断 resolve 过的就不用再 reject 了（比如 reject 和 resolve 同时调用的时候）  Promise/A+ 2.3.3.1
      let then = x.then;
      if (typeof then === 'function') { 
        // 不要写成 x.then，直接 then.call 就可以了 因为 x.then 会再次取值，Object.defineProperty  Promise/A+ 2.3.3.3
        then.call(x, y => { // 根据 promise 的状态决定是成功还是失败
          if (called) return;
          called = true;
          // 递归解析的过程（因为可能 promise 中还有 promise） Promise/A+ 2.3.3.3.1
          resolvePromise(promise2, y, resolve, reject); 
        }, r => {
          // 只要失败就失败 Promise/A+ 2.3.3.3.2
          if (called) return;
          called = true;
          reject(r);
        });
      } else {
        // 如果 x.then 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.3.4
        resolve(x);
      }
    } catch (e) {
      // Promise/A+ 2.3.3.2
      if (called) return;
      called = true;
      reject(e)
    }
  } else {
    // 如果 x 是个普通值就直接返回 resolve 作为结果  Promise/A+ 2.3.4  
    resolve(x)
  }
}

class Promise {
  constructor(executor) {
    this.status = PENDING;
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks= [];

    let resolve = (value) => {
      if(this.status ===  PENDING) {
        this.status = FULFILLED;
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    } 

    let reject = (reason) => {
      if(this.status ===  PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    }

    try {
      executor(resolve,reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    //解决 onFufilled，onRejected 没有传值的问题
    //Promise/A+ 2.2.1 / Promise/A+ 2.2.5 / Promise/A+ 2.2.7.3 / Promise/A+ 2.2.7.4
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    //因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后 then 的 resolve 中捕获
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    // 每次调用 then 都返回一个新的 promise  Promise/A+ 2.2.7
    let promise2 = new Promise((resolve, reject) => {
      if (this.status === FULFILLED) {
        //Promise/A+ 2.2.2
        //Promise/A+ 2.2.4 --- setTimeout
        setTimeout(() => {
          try {
            //Promise/A+ 2.2.7.1
            let x = onFulfilled(this.value);
            // x可能是一个proimise
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            //Promise/A+ 2.2.7.2
            reject(e)
          }
        }, 0);
      }

      if (this.status === REJECTED) {
        //Promise/A+ 2.2.3
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e)
          }
        }, 0);
      }

      if (this.status === PENDING) {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e)
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(()=> {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e)
            }
          }, 0);
        });
      }
    });

    return promise2;
  }
}

Promise.all

核心就是有一个失败则失败，全成功才进行 resolve

Promise.all = function(values) {
  if (!Array.isArray(values)) {
    const type = typeof values;
    return new TypeError(`TypeError: ${type} ${values} is not iterable`)
  }
  return new Promise((resolve, reject) => {
    let resultArr = [];
    let orderIndex = 0;
    const processResultByKey = (value, index) => {
      resultArr[index] = value;
      if (++orderIndex === values.length) {
          resolve(resultArr)
      }
    }
    for (let i = 0; i < values.length; i++) {
      let value = values[i];
      if (value && typeof value.then === 'function') {
        value.then((value) => {
          processResultByKey(value, i);
        }, reject);
      } else {
        processResultByKey(value, i);
      }
    }
  });
}

到此这篇关于javascript实现手写promise的示例代码的文章就介绍到这了,更多相关JavaScript手写promise内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript实现手写promise的示例代码

本文链接: https://www.lsjlt.com/news/208946.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JavaScript实现手写promise的示例代码
    目录背景需求then的链式调用Promise.all背景 promise 作为前端开发中常用的函数，解决了 js 处理异步时回调地狱的问题，大家应该也不陌生了，今天来学习一下 pro...
    99+
    2023-05-15
    JavaScript手写promise JavaScript promise
  • JavaScript实现手写call/apply/bind的示例代码
    目录callcall的作用是啥总结applybind优化总结还记得之前面试得物的时候，上来就是一道手写bind，当时咱也不知道啥情况，也没准备什么手写的题目，就这样轻轻松松的挂了 现...
    99+
    2023-02-08
    JavaScript实现call apply bind JavaScript call apply bind JavaScript call JavaScript apply JavaScript b
  • JavaScript手写代码的示例分析
    小编给大家分享一下JavaScript手写代码的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1. 实现一个new操作符...
    99+
    2022-10-19
  • JavaScript手写LRU算法的示例代码
    目录一、基本要求二、数据结构2.1 Map2.2 Doubly Linked List三、Map 实现四、双向链表实现4.1 定义节点类4.2 定义链表类4.3 定义 LRU 类4....
    99+
    2022-11-13
  • JavaScript怎么实现手写promise
    这篇文章主要介绍了JavaScript怎么实现手写promise的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么实现手写promise文章都会有所收获，下面我们一起来看看吧。需求我们先来总...
    99+
    2023-07-06
  • PyTorch实现手写数字识别的示例代码
    目录加载手写数字的数据数据加载器（分批加载）建立模型模型训练测试集抽取数据，查看预测结果计算模型精度自己手写数字进行预测加载手写数字的数据 组成训练集和测试集，这里已经下载好了，所以...
    99+
    2022-11-11
  • Java实现手写一个线程池的示例代码
    目录概述线程池框架设计代码实现阻塞队列的实现线程池消费端实现获取任务超时设计拒绝策略设计概述 线程池技术想必大家都不陌生把，相信在平时的工作中没有少用，而且这也是面试频率非常高的一个...
    99+
    2022-11-13
    Java手写线程池 Java线程池
  • C语言实现手写红黑树的示例代码
    目录前沿红黑树代码测试前沿 写C的红黑树前建议先看我博客这篇文章Java-红黑树 主要看原理 红黑树代码 #ifndef STUDY_RBTREE_H #define ...
    99+
    2022-11-13
  • 微信小程序实现手写签名的示例代码
    目录1.效果图2.相关代码canvas代码js相关在微信小程序上实现手写签名，获取canvascontext新版本和旧版本有点坑，新版本在获取canvas后如果页面有滑动，则签名坐标...
    99+
    2022-11-13
  • C语言实现手写Map(全功能)的示例代码
    目录为啥需要Map结构主流Map结构数组+链表的Map结构hash函数创建Map集合扩容基数扩容Map集合给Map集合添加元素打印Map集合获取Map集合中的指定元素判断键是否存在判...
    99+
    2022-11-13
  • Java实现手写乞丐版线程池的示例代码
    目录前言线程池的具体实现线程池实现思路线程池实现代码线程池测试代码杂谈总结前言 在上篇文章线程池的前世今生当中我们介绍了实现线程池的原理，在这篇文章当中我们主要介绍实现一个非常简易版...
    99+
    2022-11-13
    Java手写线程池 Java线程池
  • Python手动实现Hough圆变换的示例代码怎么写
    今天给大家介绍一下Python手动实现Hough圆变换的示例代码怎么写。文章的内容小编觉得不错，现在给大家分享一下，觉得有需要的朋友可以了解一下，希望对大家有所帮助，下面跟着小编的思路一起来阅读吧。Hough圆变换的原理很多博客都已经说得非...
    99+
    2023-06-26
  • JavaScript面试必考之实现手写Promise
    目录Promise手写框架完整代码测试resolverejectPromise手写 Promise作为面试必考题，Promise的手写也是面试官必问的问题，所以对于Promise我们...
    99+
    2022-12-08
    JavaScript实现手写Promise JavaScript手写Promise JavaScript Promise
  • pytorch教程实现mnist手写数字识别代码示例
    目录1.构建网络2.编写训练代码3.编写测试代码4.指导程序train和test5.完整代码 1.构建网络 nn.Moudle是pytorch官方指定的编写Net模块，在init函数...
    99+
    2022-11-12
  • 超详细PyTorch实现手写数字识别器的示例代码
    前言 深度学习中有很多玩具数据，mnist就是其中一个，一个人能否入门深度学习往往就是以能否玩转mnist数据来判断的，在前面很多基础介绍后我们就可以来实现一个简单的手写数字识别的网...
    99+
    2022-11-11
  • C语言手写集合List的示例代码
    目录前沿定义结构创建List扩容创建数据节点给集合添加值删除集合内指定的值删除集合内指定下标的值打印集合迭代器查询指定元素的下标(第一个)末尾查询指定元素下标(第一个)判断数组是否有...
    99+
    2022-11-13
  • C语言实现手写字符串处理工具的示例代码
    目录头文件实现文件头文件 #ifndef STUDY_STR_UTIL_H #define STUDY_STR_UTIL_H #include "../structure/cha...
    99+
    2022-11-13
  • C++实现ini文件读写的示例代码
    目录介绍1.使用INIReader.h头文件1.INIReader.h2.test.ini3.INIReaderTest.cpp2.使用ini.h头文件1.ini.h2.config...
    99+
    2022-11-13
  • JavaScript实现跟随广告的示例代码
    浮动广告是目前网站很常见的一种广告形式，浮动广告能实时跟随用户的浏览，有效的传达产品要表达的意思，达到很好的传播效果。那么浮动广告是怎么实现的呢，其实实现浮动广告并不难，具体如下： ...
    99+
    2022-11-12
  • android中实现手机号码的校验的示例代码
    现在应用中都有对手机号码的校验，我以我自己的方式实现了一把，下面是效果图核心代码很简单，如下： public static boolean isMobileNO(String mobiles) { String telReg...
    99+
    2023-05-30
    android 手机号码 校验
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作