es6学习3:promise
promise含义:
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
promise基本用法:
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
- const promise = new Promise(function(resolve, reject) {
- // ... some code
- if (/* 异步操作成功 */){
- resolve(value);
- } else {
- reject(error);
- }
- });
- promise.then(function(value) {
- // success
- }, function(error) {
- // failure
- });
promise新建后就会立即执行
- var promise = new Promise(function(resolve, reject) {
- console.log('Promise instance');
- resolve();
- });
- promise.then(function() {
- console.log('resolved result');
- });
- for(var i=0;i<100;i++) {
- console.log(i);
}- /*
- Promise instance
- 1
- 2
- 3
- ...
- 99
- 100
- resolved result
- */
resolve
函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样。
- const p1 = new Promise(function (resolve, reject) {
- // ...
- });
- const p2 = new Promise(function (resolve, reject) {
- // ...
- resolve(p1);
- })
上面代码中,p1
和p2
都是 Promise 的实例,但是p2
的resolve
方法将p1
作为参数,即一个异步操作的结果是返回另一个异步操作。
注意,这时p1
的状态就会传递给p2
,也就是说,p1
的状态决定了p2
的状态。如果p1
的状态是pending
,那么p2
的回调函数就会等待p1
的状态改变;如果p1
的状态已经是resolved
或者rejected
,那么p2
的回调函数将会立刻执行。
promise.prototype,then()
Promise 实例具有then
方法,也就是说,then
方法是定义在原型对象Promise.prototype
上的。它的作用是为 Promise 实例添加状态改变时的回调函数。
前面说过,then
方法的第一个参数是resolved
状态的回调函数,第二个参数(可选)是rejected
状态的回调函数。
then
方法返回的是一个新的Promise
实例(注意,不是原来那个Promise
实例)。因此可以采用链式写法,即then
方法后面再调用另一个then
方法。
- getJSON("/posts.json").then(function(json) {
- return json.post;
- }).then(function(post) {
- // ...
- });
上面的代码使用then
方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
采用链式的then
,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise
对象(即有异步操作),这时后一个回调函数,就会等待该Promise
对象的状态发生变化,才会被调用。
- getJSON("/post/1.json").then(function(post) {
- return getJSON(post.commentURL);
- }).then(function (comments) {
- console.log("resolved: ", comments);
- }, function (err){
- console.log("rejected: ", err);
- });
上面代码中,第一个then
方法指定的回调函数,返回的是另一个Promise
对象。这时,第二个then
方法指定的回调函数,就会等待这个新的Promise
对象状态发生变化。如果变为resolved
,就调用第一个回调函数,如果状态变为rejected
,就调用第二个回调函数。
- 如果采用箭头函数,上面的代码可以写得更简洁。
- getJSON("/post/1.json").then(
- post => getJSON(post.commentURL)
- ).then(
- comments => console.log("resolved: ", comments),
- err => console.log("rejected: ", err)
- );
promise.prototype.catch()
- getJSON('/posts.json').then(function(posts) {
- // ...
- }).catch(function(error) {
- // 处理 getJSON 和 前一个回调函数运行时发生的错误
- console.log('发生错误!', error);
- });
上面代码中,getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数;
如果异步操作抛出错误,状态就会变为rejected,就会调用catch方法指定的回调函数,处理这个错误。另外,then方法指定的回调函数,如果运行中抛出错误,也会被catch方法捕获。
- p.then((val) => console.log('fulfilled:', val))
- .catch((err) => console.log('rejected', err));
- // 等同于
- p.then((val) => console.log('fulfilled:', val))
- .then(null, (err) => console.log("rejected:", err));
一般来说,不要在then
方法里面定义 Reject 状态的回调函数(即then
的第二个参数),总是使用catch
方法。
- // bad
- promise
- .then(function(data) {
- // success
- }, function(err) {
- // error
- });
- // good
- promise
- .then(function(data) { //cb
- // success
- })
- .catch(function(err) {
- // error
- });
上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then
方法执行中的错误,也更接近同步的写法(try/catch
)。因此,建议总是使用catch
方法,而不使用then
方法的第二个参数。
promise.protype.finally
finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
- promise
- .then(result => {···})
- .catch(error => {···})
- .finally(() => {···});
promise.all
Promise.all
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
- const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。(Promise.all
方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。)
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
promise.race()
Promise.race
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
- const p = Promise.race([p1, p2, p3]);
上面代码中,只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
Promise.race
方法的参数与Promise.all
方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。
下面是一个例子,如果指定时间内没有获得结果,就将 Promise 的状态变为reject
,否则变为resolve
。
- const p = Promise.race([
- fetch('/resource-that-may-take-a-while'),
- new Promise(function (resolve, reject) {
- setTimeout(() => reject(new Error('request timeout')), 5000)
- })
- ]);
- p
- .then(console.log)
- .catch(console.error);
原文出处http://es6.ruanyifeng.com/#docs/promise
es6学习3:promise的更多相关文章
- es6学习笔记--promise对象
Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...
- es6学习一 promise上
简单来说promise在异步操作上提供可读性.(原来es5的异步操作可读性实在太糟糕了,如下图) 瞬间眼前百万只奔腾的马,只不过这种马有个别名,羊驼. 一.创建形式 1. 使用的基本形式: let p ...
- ES6学习之Promise
详见之前文章:Promise详解
- ES6学习笔记(十二)异步解决方案Promise
1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了P ...
- ES6 - 基础学习(8): Promise 对象
概述 Promise是异步编程的一种解决方案,比传统的解决方案(多层嵌套回调.回调函数和事件)更强大也更合理.从语法上说,Promise是一个对象,从它可以获取异步操作的消息,Promise 还提供了 ...
- 深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
第一部分,Promise 加入 ES6 标准 原文地址 http://www.cnblogs.com/wangfupeng1988/p/6515855.html 未经作者允许不得转载! 从 jquer ...
- ES6学习目录
前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 为什么要学 ...
- es6学习笔记-async函数
1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...
- javascript的ES6学习总结(第二部分)
1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的 ...
- 一些学习比较好的网站,及es6学习好网站,前端用的相关库,及知道的插件
图形可视化:d3js echarts https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects ...
随机推荐
- requirejs:模块加载(require)及定义(define)时的路径理解
给新来的实习生普及下JS基本知识,看到比较好的文章 转载https://blog.csdn.net/xuxiaoping1989/article/details/52384778 接触过require ...
- 【初识算法】- AC算法
原文地址:https://www.cnblogs.com/jily/p/6250716.html 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符 ...
- Oracle 用户与模式的关系
一.用户登录 Oracle 数据库的安全保护流程分为3个步骤. 1.用户向数据库提供身份识别信息,即提供一个数据库账号 2.证明身份识别信息是否有效,通过密码来实现 3.用户输入的密码经过数据库的核对 ...
- Flink入门 - CoGroup和Join
/* *CoGroup */ final StreamExecutionEnvironment streamExecutionEnvironment = StreamExecutionEnvironm ...
- GO实现Cron解析和定时任务
Go的Cron表达式解析库:github.com/gorhill/cronexpr 核心类型和方法 // 表达式对象 expr *cronexpr.Expression // 解析cron表达式 ex ...
- 雪妖现世:给SAP Fiori Launchpad增添雪花纷飞的效果
1995年7月,台湾大宇公司发布了一款国产单机角色扮演游戏神作:<仙剑奇侠传1>,所谓"一包烟,一杯茶",就能在电脑面前坐一整天. 这么经典的游戏Jerry当然已经通关 ...
- Pod和Namespace的基本介绍
namespace资源名称空间 删除namespace资源会级联删除其所包含的所有其它资源对象 名称空间仅仅只是用来限制资源名称的作用域 并不能实现Pod的通信隔离 在名称空间下操作s ...
- java系统化基础-day02-运算符、选择结构、循环结构
1.java中的运算符 package com.wfd360.day02; import org.junit.Test; import java.math.BigInteger; /** * 1.算术 ...
- vip视频播放
插件 Tampermonkey https://greasyfork.org/zh-CN
- let 和 var 定义变量的区别
一.变量提升 var 存在变量提升,而 let 不存在变量提升,所以用 let 定义的变量一定要在声明后再使用,否则会报错. var //var定义的变量存在变量提升,变量会把声明提升到整个作用域的最 ...