Promise ,为什么会出现它,Promise 的出现,解决了哪些问题呢?

  • 解决了回调地狱(嵌套)的问题,不会导致难以维护。
  • 解决同步&异步的返回结果,并且按照顺序返回

大家应该都知道,在 JavaScript 的世界里,所有代码的执行都是单线程操作的。由于这个问题,导致 JavaScript 所有请求操作都必须异步执行。

Promise 本意是承诺,在程序中的意思就是承诺我过一段时间后给你返回一个结果。什么时候会用到(多一段时间)?那就是(异步操作),异步是指过了很长时间后才会返回结果。比如 网络请求、读取本地文件等~

基本用法

首先,我们去控制台打印一下 Promise,如图

很直观的看出来,Promise 是一个构造函数

  • Promise 对象拥有两种实例方法(prototype):then() 和 catch() 。
  • Promise 还拥有四个静态方法,分别是:all、race、reject、resolve。

我们粘一段代码,小白如何调用 Promise

// 引入 Promise 模块
let Promise = require('promise')
let p = new Promise(function(resolve, reject){// 如果同时调用成功和失败的方法,那么执行顺序就是:谁在前,就调谁。reject(100);resolve(1);
})
// then 接受两个回调函数,一个是成功的回调,一个是失败的回调
p.then(function(data){console.log('data', data)
},function(err){console.log('err', err)
})
// 控制台打印的结果为:data 100
复制代码

接下来我们来看看 Promise 有哪些 API

then() 方法

从例子中可以看出 then 方法可以接收两个参数,且通常都是函数。第一个参数是成功的回调,第二个参数是失败的回调。这两个参数都会将回调存放在对应的数组内,当 promise 状态改变之后,调用成功或者失败的数组即可

  • then 方法可以链式调用,与 jquery 不同,jquery 的链式调用靠的是返回的 this,可惜的是, promise 不能返回 this,promise 实现链式调用靠的是返回一个新的 Promise
let p = new Promise(function(resolve, reject){resolve()
})
// p2 和 p 不是一个东西,如果是,就会走成功了。就不会走失败了
let p2 = p.then(function(){throw new Error('错误')
})
p2.then(function(data){console.log(data)
},function(err){console.log(err)
})
// 控制台打印结果:Error: 错误
复制代码
  • promise 实例可以多次 then,当成功后,会将 then 中的成功方法按顺序执行
let p = new Promise(function(resolve, reject){// 定时器来异步回调setTimeout(function(){resolve(1000)}, 1000)
})
p.then(function(data){console.log('data', data)
},function(err){console.log('err', err)
})
p.then(function(data){console.log('data', data)
},function(err){console.log('err', err)
})
// 打印结果:
data 1000
data 1000
复制代码

catch() 方法

它有两个作用:
  • 可以和 then 的第二个参数一样,用来指定 reject 的回调
  • 执行 then 第一个回调参数时,如果抛出异常,会直接走 catch 方法
let p = new Promise(function(resolve, reject){reject(new Error('error'))
})
// then 没有写第二个 reject 回调
p.then(function(data){console.log(data)
}).catch(function(reasone){console.log(reasone)
})
// 打印结果: Error: error
复制代码

resolve() & reject() 方法

  • Promise.resolve() 相当于创建了一个立即 resolve 对象,使得 promise 对象直接 resolve。
Promise.resolve(5).then(function(data){console.log(data)
})
// 打印结果:5
复制代码
  • Promise.reject() 相当于创建了一个立即 reject 对象,使得 promise 对象直接 reject,并把 error 传到 catch 函数中
Promise.reject(new Error('error')).catch(function(err){console.log(err)
})
// 打印结果:Error: error
复制代码

all() 方法

  • Promise.all() 接收的参数是 promise 对象组成的数组,并返回新的 promise 对象。
Promise.all([Promise.resolve(100),Promise.resolve(200)]).then(function(data){console.log('成功:',data)
},function(err){console.log(err)
})
// 打印结果:成功: [ 100, 200 ]
复制代码
  • 当数组中有一个 reject 时,会改变状态,并执行错误状态
Promise.all([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功:',data)
},function(err){console.log(err)
})
// 打印结果:Error: error
复制代码

race() 方法

  • Promise.race() 同样接收的参数是 promise 对象组成的数组,并返回新的 promise 对象。与 Promise.all() 不同的是只要第一个数组成功了。就算成功。如果第一个失败了。就算失败
// 成功的状态,第一个数组对象,成功了就不会执行下一个数组对象
Promise.race([Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功:',data)
},function(err){console.log(err)
})// 失败的状态,第一个数组对象失败,就会报错,后面也不执行
Promise.race([Promise.reject(new Error('error')),Promise.resolve(100),Promise.reject(new Error('error'))]).then(function(data){console.log('成功:',data)
},function(err){console.log(err)
})
复制代码

友情链接

  • Promise 源码实现:www.jianshu.com/p/7754f0182…
  • Promise 对象:es6.ruanyifeng.com/#docs/promi…

Promise 基础用法相关推荐

  1. ES6 — Promise基础用法详解(resolve、reject、then、catch,all,)

    ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...

  2. Promise基础用法

    什么是Promise? Promise是用来处理异步的; Promise就是承诺,对未来的承诺; 所谓的Promise(承诺),里面保存着未来才会结束的事件的结果; Promise是异步编程的一种解决 ...

  3. Promise详解(一) ----基础用法

    什么是Promise Promise是由社区最早提出并实现的,后加入到es6规范中.为更好处理javascript异步问题,用于解决其多次异步回掉嵌套问题.下面先尝试下promise的基础用法吧. 创 ...

  4. Promise、Promise.all 和Promise.race用法

    前段时间的项目中由于大多数是异步请求,所以返回的数据顺序不确定造成了很多数据错误.查了大量的资料总算完成,做个小结. promise基础:resolve,和reject resolve方法:在异步方法 ...

  5. Pandas基础用法合集(中文官档)

    本节介绍 pandas 数据结构的基础用法.下列代码创建示例数据对象: In [1]: index = pd.date_range('1/1/2000', periods=8) In [2]: s = ...

  6. pandas object转float_数据分析篇 | Pandas基础用法6【完结篇】

    这是最后一篇,至此Pandas系列终于连载完了,有需要的也可以看看前面6篇,尽请收藏. 数据分析篇 | Pandas 概览 数据分析篇 | Pandas基础用法1数据分析篇 | Pandas基础用法2 ...

  7. dubbo官方文档中文_Pandas中文官方文档:基础用法5

    本文授权转载自Python大咖谈禁止二次转载 大家好,我是老表 阅读文本大概需要 16 分钟 建议从头开始学习,本系列前四篇 Pandas中文官方文档:基础用法1 Pandas中文官方文档:基础用法2 ...

  8. struct用法_精讲响应式webclient第1篇-响应式非阻塞IO与基础用法

    笔者在之前已经写了一系列的关于RestTemplate的文章,如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层HT ...

  9. ORACLE的基础用法

    ORACLE的基础用法 转 自:http://blog.163.com/kelly_19831017/blog/static/6196787020083133348873/ sqlplus sys/o ...

最新文章

  1. Java交换两个Integer-一道无聊的题的思考
  2. python广告搞笑_技术入门 | 听说Python的广告刷爆了你的朋友圈?
  3. 一步步实现:springbean的生命周期测试代码
  4. 支付宝小程序中Navigator和导航栏之间的区别以及用法场景的分析
  5. VMWAre+centeros7下tomcat的安装
  6. idea 快捷删除移动_21个极大提高开发效率的VS Code快捷键
  7. 趣文:如果像招聘程序员那样招聘木匠
  8. canvas节点无法导出图片_html页面、canvas导出图片
  9. 基于ADS54J40的JESD204B ADC 1GHz采样逻辑开发笔记
  10. 批量html源代码 翻译,一键实现网页中英文对照的黑科技翻译工具
  11. 小学计算机教师业务笔记,2016-2017学年度小学教师业务学习笔记
  12. 数据库的系统组成包括哪些?
  13. 数据仓库指北(文末附PDF下载)
  14. GPU服务器的上手使用-小试牛刀
  15. 【Android】快速实现仿美团选择城市界面,微信通讯录界面
  16. 爱迪转债上市价格预测
  17. [极客大挑战 2020]Roamphp 1、2、4
  18. 【开源项目】X-TRACK源码分析
  19. SCS【12】单细胞转录组之评估不同单细胞亚群的分化潜能 (Cytotrace)
  20. React.js加载组件以及JSX脚本处理代码

热门文章

  1. 语言怎么绘画人物肖像_国画里的新年,看看古人是怎么过年的!
  2. mvcc原理_MVCC原理探究及MySQL源码实现分析
  3. 1.1 一个简单的脚本
  4. ORA-01940 无法删除当前已连接的用户之解决方案
  5. leetcode python 011
  6. java.net.SocketException:No buffer space avaliable(maximum connection reached?):JVM_Bind 解决办法...
  7. 能使用html/css解决的问题就不要使用JS
  8. 图论算法》关于SPFA和Dijkstra算法的两三事
  9. Linux CentOS 6.5 + Apache + Mariadb + PHP环境搭建
  10. C#中数据类型转换-显式转换