浅谈promise用es5实现
作为新人第一次撸博客,写的不好 多多包涵
由于JavaScript所有的代码都是单线程执行的 所以es6的时候出现了promise
promise作为es6的异步操作构造函数有all、reject、resolve这几个方法,其原型上then、catch等方法;其有三种状态分别为
pending进行中,resolve已完成,reject失败
1.接下来我们进入正题,这篇博客内容主要是为了更加深刻的理解promise的原理:
//那new一个把 var test = new Promise(function(resolve, reject){resolve('数据'); });
promise作为一个构造函数,接收的参数是个函数,传入两个参数(resolve,reject)分别表示异步操作执行成功和失败的回调;
resolve把状态从pending变成resolve,reject把状态从pending变成reject
一般我们用promise的时候是包在一个函数中,在需要的时候去调用运行它:
function Async(){var test = new Promise(function(resolve,reject){resolve("成功返回数据")})return test; }
Async()
接下来我们就可以调用它:
Async().then(function(res){console.log(res)//....//可以对传过来的数据进行一系列操作 })
你还可以不断地then进行回调进行链式操作用法:
promise成功解决了之前es5的回调地狱
用代码来展示下promise的精髓:
function Async1(){var p = new Promise(function(resolve, reject){resolve('随便什么数据1');});return p; } function Async2(){var p = new Promise(function(resolve, reject){resolve('随便什么数据2');});return p; } function Async3(){var p = new Promise(function(resolve, reject){resolve('随便什么数据3');});return p; }Async1() .then(function(data){console.log(data);return Async2(); }) .then(function(data){console.log(data);return Async3(); }) .then(function(data){console.log(data); }); //接下来可以清楚的看到:// 随便什么数据1// 随便什么数据2// 随便什么数据3
2.promise的用法已经介绍了,接下来我们来用es5实现promise:
function promise (fn) {if (typeof this !== 'object') { throw new TypeError('Promises must be constructed via new');}if (typeof fn !== 'function') {throw new TypeError('Promise constructor\'s argument is not a function');}this.state = "pending"; //定义状态this.msg="";var process=arguments[0];var that=this;process(function(){that.state="resolve"that.msg=arguments[0]},function(){that.state="reject"that.msg=arguments[0]})return this}promise.prototype.then=function(){constructor:promiseif(this.state == "resolve"){arguments[0](this.msg)}else if(this.status=='reject'&&arguments[1]){arguments[1](this.msg)}promise=new this.constructor(function (resolve,reject) {resolve("2")}) //每次调用then之后重新返回一个新的promise实例进行下一步then的调用// console.log(this)// console.log(promise)return promise}var mm = new promise(function(resolve,reject){resolve("1")})mm.then(function(res){ //then回调 console.log(res)}).then(function(res){console.log(res)})
转载于:https://www.cnblogs.com/xweizi/p/10089876.html
浅谈promise用es5实现相关推荐
- es5如何实现promise_浅谈promise用es5实现
作为新人第一次撸博客,写的不好 多多包涵 由于JavaScript所有的代码都是单线程执行的 所以es6的时候出现了promise promise作为es6的异步操作构造函数有all.reject.r ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- 浅谈JavaScript、ES5、ES6
什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...
- 浅谈JavaScript、ES5、ES6 ,,转自http://www.cnblogs.com/lovesong/p/4908871.html
什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...
- 浅谈Promise对象在ReactNative中的使用
下面开始: 写在前面 假设现在一个日常开发会遇到这样一个需求:多个接口异步请求,第二个接口依赖于第一个 接口执行完毕之后才能利用数据进行一系列操作.一般会这样写: A.fetchData({url: ...
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
- 浅谈 TypeScript【下】-- TypeScript 语言规范与基本应用
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在 [浅谈 TypeScript[上]]中,简单讲述了关于JavaScript静态类型检查工具Flow的用法等.可以看到,我们接下来讲述的TypeS ...
- 三英战豪强,思绪走四方。浅谈我眼中的express、koa和koa2
支持原创,本文为转载文章,转载是为了备忘或丢失,这么好的文章. https://www.jianshu.com/p/3806417a1991?from=timeline 前言 跟好朋友打赌,我要来个技 ...
- 2018 浅谈前端面试那些事
1.HTML HTML5新特性,语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug,和一些定位写法 c ...
最新文章
- Flash Builder 4快速入门----学习笔记
- docker 查看容器占用磁盘大小
- 自学python需要多长时间-零基础自学python要多久?
- intellij idea 全局搜索
- ABAP动态编程之功能实现
- 协方差、相关系数---通俗解释
- vue3.0js 非prop属性的值和setup函数的使用
- 构建高性能WEB站点笔记二
- pin码是什么意思?
- 滴滴自动驾驶首轮融资超5亿美元 加大研发投入 助力“新基建”
- 5亿美元续命!Uber自动驾驶存亡之秋喜获丰田投资
- Linux删除带空格的文件 删除最后一个后缀名
- 两年经验,尽然斩获多家巨头offer,如:蚂蚁、头条、PingCAP~
- 关于Mac下python和pycharm的异常点
- 高分四号数据计算表观反射率
- 2023年太原理工大学水利工程考研考情与难度、参考书前辈备考经验
- MFC 鼠标画线总结
- 996下的最后一根稻草
- dubbo消费者调用报错Unsupported protocol rest in notified url
- python幂次方计算公式_【python】计算一个数得n次方?