作为新人第一次撸博客,写的不好 多多包涵

由于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实现相关推荐

  1. es5如何实现promise_浅谈promise用es5实现

    作为新人第一次撸博客,写的不好 多多包涵 由于JavaScript所有的代码都是单线程执行的 所以es6的时候出现了promise promise作为es6的异步操作构造函数有all.reject.r ...

  2. JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6

    Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...

  3. 浅谈JavaScript、ES5、ES6

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...

  4. 浅谈JavaScript、ES5、ES6 ,,转自http://www.cnblogs.com/lovesong/p/4908871.html

    什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不 ...

  5. 浅谈Promise对象在ReactNative中的使用

    下面开始: 写在前面 假设现在一个日常开发会遇到这样一个需求:多个接口异步请求,第二个接口依赖于第一个 接口执行完毕之后才能利用数据进行一系列操作.一般会这样写: A.fetchData({url: ...

  6. 浅谈前端自动化构建 -- Grunt、Gulp、FIS

    前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...

  7. 浅谈 TypeScript【下】-- TypeScript 语言规范与基本应用

    文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在 [浅谈 TypeScript[上]]中,简单讲述了关于JavaScript静态类型检查工具Flow的用法等.可以看到,我们接下来讲述的TypeS ...

  8. 三英战豪强,思绪走四方。浅谈我眼中的express、koa和koa2

    支持原创,本文为转载文章,转载是为了备忘或丢失,这么好的文章. https://www.jianshu.com/p/3806417a1991?from=timeline 前言 跟好朋友打赌,我要来个技 ...

  9. 2018 浅谈前端面试那些事

    1.HTML HTML5新特性,语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug,和一些定位写法 c ...

最新文章

  1. Flash Builder 4快速入门----学习笔记
  2. docker 查看容器占用磁盘大小
  3. 自学python需要多长时间-零基础自学python要多久?
  4. intellij idea 全局搜索
  5. ABAP动态编程之功能实现
  6. 协方差、相关系数---通俗解释
  7. vue3.0js 非prop属性的值和setup函数的使用
  8. 构建高性能WEB站点笔记二
  9. pin码是什么意思?
  10. 滴滴自动驾驶首轮融资超5亿美元 加大研发投入 助力“新基建”
  11. 5亿美元续命!Uber自动驾驶存亡之秋喜获丰田投资
  12. Linux删除带空格的文件 删除最后一个后缀名
  13. 两年经验,尽然斩获多家巨头offer,如:蚂蚁、头条、PingCAP~
  14. 关于Mac下python和pycharm的异常点
  15. 高分四号数据计算表观反射率
  16. 2023年太原理工大学水利工程考研考情与难度、参考书前辈备考经验
  17. MFC 鼠标画线总结
  18. 996下的最后一根稻草
  19. dubbo消费者调用报错Unsupported protocol rest in notified url
  20. python幂次方计算公式_【python】计算一个数得n次方?

热门文章

  1. CSS选择器(转载)
  2. 对象的比较与排序(五):C#运算符重载
  3. BT项目的运作之一项目建设方案与BT总包方的选择
  4. Smarty变量调节器的使用
  5. JavaScript 判断 DOM 何时加载完毕
  6. JavaScript 事件入门知识
  7. 求连续子数组的最大和
  8. 论MySQL何时使用索引,何时不使用索引
  9. ACM模板--邻接矩阵 无向图 Prim Kruskal Dijkstra
  10. 字典树(trie树)、后缀树