最近看到了一个有趣的Promise的方法,这里记录下来

 <script>
class MyPromise {
constructor(executor) {
// 初始化state赋值为pending
this.state = "pending";
// 定义成功的 值
this.value = undefined;
//定义失败的 原因
this.reason = undefined;
//定义成功存起来的数组
this.onResolvedCallbacks = [];
//定义失败存起来的数组
this.onRejectedCallbacks = [];
let resolve = (value) => {
// state改变,resolve调用就会失败
if (this.state === "pending") {
this.value = value;
//resolve调用后,state转为fulfilled
this.state = "fulfilled";
// 一旦resolve执行,调用成功数组的函数
this.onResolvedCallbacks.forEach(function (fn) {
return fn(value);
});
//也可以使用es6语法 简写
//this.onResolvedCallbacks.forEach(fn => fn(value));
}
};
let reject = (reason) => {
// state改变,reject调用就会失败
if (this.state === "pending") {
this.reason = reason;
// reject调用后,state转为失败状态
this.state = "rejected";
// 一旦reject执行,调用失败数组的函数
this.onRejectedCallbacks.forEach(fn => fn(reason)); //简写
}
}; // new MyPromise后的实例具有状态, 默认状态是等待,当执行器调用resolve后, 实例状态为成功状态;当执行器调用reject后,实例状态为失败状态
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
} // then中有两个参数 ,把第一个参数叫做then的成功回调,把第二个参数叫做then的失败回调,这两个参数也都是函数,当执行器调用resolve后,then中第一个参数函数会执行,当执行器调用reject后,then中第二个参数函数会执行
then(onFulfilled, onRejected) {
// 状态为fulfilled,执行onFulfilled,传入成功的值
if (this.state === "fulfilled") {
onFulfilled(this.value);
}
// 状态为rejected,执行onRejected,传入失败的原因
if (this.state === "rejected") {
onRejected(this.reason);
}
// 状态为pending时
if (this.state === "pending") {
// onFulfilled传入到成功数组
this.onResolvedCallbacks.push(onFulfilled);
// onRejected传入到失败数组
this.onRejectedCallbacks.push(onRejected);
}
}
}
//当new MyPromise实例 会立即调用constructor(executor)
let p = new MyPromise((resolve, reject) => {
console.log("开始");
setTimeout(function () {
resolve("我成功了");
}, 2000);
}); p.then(
(resolve) => {
console.log("success:" + resolve);
},
(reject) => {
console.log("error:" + reject);
}
);
console.log("结束");
</script>

转载于:https://blog.csdn.net/l_XIANA/article/details/110141804?utm_medium=distribute.pc_category.none-task-blog-hot-9.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-9.nonecase

如何封装Promise对象?的更多相关文章

  1. 回调函数 和 promise对象,及封装API接口

    1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...

  2. 使用promise对象封装一个ajaxGet函数

    function promiseAjax(url,data){        var pro = new Promise(function(success,failed){           承诺一 ...

  3. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...

  4. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  5. JavaScript异步编程(1)- ECMAScript 6的Promise对象

    JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...

  6. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  7. JavaScript 初识Promise 对象

    什么是Promise? 其实, Promise就是一个类,而且这个类已经成为ES6的标准,是 ECMAScript 6 规范的重要特性之一.这个类目前在chrome32.Opera19.Firefox ...

  8. 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  9. 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)

    本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...

随机推荐

  1. Ubuntu16.04网卡配置

    新安装的Ubuntu16.04系统容易出现无法连接有线网络的问题,主要是因为网卡配置不完善,下面通过实操讲解如何解决该问题. 1. 查看网络设备 ifconfig 发现只有enp2s0和lo,没有et ...

  2. php 文件上传错误

    假设文件上传字段的名称img,则: $_FILES['img']['error']有以下几种类型 1.UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功. 2.UPLOAD_ERR_I ...

  3. SpringBoot从入门到精通教程(七)

    今天,我们继续讲SpringBoot整合Redis ,也就缓存,它将与我们的Springboot整合 Redis 简介 Redis 是当前比较热门的NOSQL系统之一,它是一个开源的使用ANSI c语 ...

  4. Java详细指南

    Java 基础 并发 JVM Java8 新特性 代码优化 网络 操作系统 数据结构与算法 数据库 系统设计 设计模式 常用框架 网站架构 软件底层 其他 Java 基础 <Head First ...

  5. ID3很不错的讲解(matlab程序实现)

    1)决策树之ID3 决策树算法是分类算法的一种,基础是ID3算法,C4.5.C5.0都是对ID3的改进.ID3算法的基本思想是,选择信息增益最大的属性作为当前的分类属性. 看Tom M. Mitche ...

  6. C# 7-zip 压缩和解压缩

    using System; using System.Collections.Generic; using System.Text; using SevenZip; using System.IO; ...

  7. MethodHandleVS反射

    Method Handle与反射 如无特殊说明,本文所有代码均基于JDK1.8.0_221 Method Handle入门 反射我们都知道,为我们提供了运行时对类的成员方法访问的手段,极大地提高了Ja ...

  8. 任务调度框架Quartz快速入门!

    目录 Quartz是什么 Quartz中的重要API及概念 超重要API 重要概念 Quartz设计理念:为什么设计Job和Trigger? 最简单的Quartz使用案例 Job实例和JobDetai ...

  9. CentOS7 实战源码安装mysql5.7.17数据库服务器

    CentOS7 实战源码安装mysql5.7.17数据库服务器 简介:实战演练mysql数据库服务器的搭建  mysql简介: mysql是一个开源的关系型数据库管理系统,现在是oracle公司旗下的 ...

  10. jsp中将一个jsp引入另一个jsp指定位置

    <jsp:include page="badSurveyUpdate.jsp"/>