如何封装Promise对象?
最近看到了一个有趣的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>
如何封装Promise对象?的更多相关文章
- 回调函数 和 promise对象,及封装API接口
1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...
- 使用promise对象封装一个ajaxGet函数
function promiseAjax(url,data){ var pro = new Promise(function(success,failed){ 承诺一 ...
- 用Promise对象封装JQuery的AJAX过程
let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...
- ES6深入学习记录(二)promise对象相关
1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- JavaScript 初识Promise 对象
什么是Promise? 其实, Promise就是一个类,而且这个类已经成为ES6的标准,是 ECMAScript 6 规范的重要特性之一.这个类目前在chrome32.Opera19.Firefox ...
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
随机推荐
- js--数组的filter()过滤方法的使用
前言 你还在通过for循环遍历数组吗?你还在遍历之后一项一项的通过if判断过滤你需要的数据吗?你还在写着一大堆代码实现一个简单的过滤数据功能吗?那么,今天他来了.他就是这里要介绍的es6中数组filt ...
- MySQL数据归档小工具推荐--mysql_archiver
一.主要概述 MySQL数据库归档历史数据主要可以分为三种方式:一.创建编写SP.设置Event:二.通过dump导入导出:三.通过pt-archiver工具进行归档.第一种方式往往受限于同实例要求, ...
- Android 7.0应用之间共享文件
原文首发于微信公众号:躬行之,欢迎关注交流! 开发中经常需要将某个文件向另一个应用程序传递,如图片上传到另一个应用程序.文件在不同存储路径之间的复制粘贴等都需要共享文件,可以这样理解接收文件的应用是在 ...
- python解压可迭代对象赋值给多个变量
如果一个可迭代对象的元素个数超过了变量的个数,会出现"解压值太多"的异常,python提供*号表达式(码夫破石的理解)来解决. 1,求一组平均值,就以类似学生成绩为例,要求是去掉第 ...
- “体检医生”黑科技|让AI开发更精准,ModelArts更新模型诊断功能
摘要:华为云AI开发平台ModelArts黑科技加持AI研发,让模型开发更高效.更简单,降低AI在行业的落地门槛.全面的可视化评估以及智能诊断功能,使得开发者可以直观了解模型各方面性能,从而进行针对性 ...
- wildfly 21中应用程序的部署
目录 简介 Managed Domain中的部署 管理展开的部署文件 standalone模式下的部署 standalone模式下的自动部署 Marker Files 受管理的和不受管理的部署 部署覆 ...
- SQL优化器-RBO与CBO分别是什么
数据库系统发展历史 数据库系统产生于20世纪60年代中期,至今有近50多年的历史,其发展经历了三代演变,造就了四位图灵奖得主,发展成为一门计算机基础学科,带动了一个巨大的软件产业. 数据库系统是操作系 ...
- HTTP ERROR400的问题解决
今天写添加功能,在点添加提交时报了一个"HTTP ERROR 400"的错误,如图, 请求提交的代码死活跳转不到后台,郁闷中,开启debug功能,开始一步步排查, 1.先单独把跳转 ...
- Vue利用v-for渲染时表单信息出不来
今天在写项目时,Controller的值已经传入到html,但是利用vue进行渲染的时候就是出不来, 原因如下: 注意,in 之前的空格.
- Qt类库介绍
QT类库 QT核心特点 QT是一个跨平台开发的类库. QT的元对象编译器MOC是一个预处理器,在源程序被编译前先将这些QT特性的程序转为标准的C++兼容的形式,然后再有标准的C++编译器进行编译.也就 ...