【ES6 】Promise
Promise对象定义:
用来处理异步编程
Promise对象的特点
- 对象的状态不受外界影响
- 一旦状态改变,就不会再变,任何时候都可以得到这个结果
Promise对象的状态
pending
(进行中)fulfilled
(已成功)rejected
(已失败)
Promise对象的状态改变2种可能
- 从
pending
变为fulfilled
- 从
pending
变为rejected
Promise对象的缺点
- 无法取消
Promise
,一旦新建它就会立即执行,无法中途取消; - 如果不设置回调函数,
Promise
内部抛出的错误,不会反应到外部; - 当处于
pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
Promise对象基本用法
- ES6 规定,
Promise
对象是一个构造函数,用来生成Promise
实例。 Promise
构造函数的参数是一个函数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去const promise = new Promise(function(resolve, reject) {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});用
then
方法分别指定resolved
状态和rejected
状态的回调函数。Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。then
方法可以接受两个回调函数作为参数。
1.第一个回调函数是Promise
对象的状态变为resolved
时调用,
2.第二个回调函数是Promise
对象的状态变为rejected
时调用。
3.其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise
对象传出的值作为参数。function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
} timeout(100).then((value) => {
console.log(value);
});上面代码中,
timeout
方法返回一个Promise
实例,表示一段时间以后才会发生的结果。
过了指定的时间(ms
参数)以后,Promise
实例的状态变为resolved
,就会触发then
方法绑定的回调函数。Promise 新建后就会立即执行。
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
}); promise.then(function() {
console.log('resolved.');
}); console.log('Hi!'); // Promise
// Hi!
// resolved上面代码中,Promise 新建后立即执行,所以首先输出的是
Promise
。
然后,then
方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved
最后输出。
图片懒加载
function loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image(); image.onload = function() {
resolve(image);
}; image.onerror = function() {
reject(new Error('Could not load image at ' + url));
}; image.src = url;
});
}
resolve
函数和reject
函数的参数问题
reject
函数的参数通常是Error
对象的实例,表示抛出的错误; resolve
函数的参数除了正常的值以外,还可能是另一个 Promise 实例
- 用
Promise
对象实现的 Ajax 操作const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send(); }); return promise;
}; getJSON("/posts.json").then(function(json) {
console.log('Contents: ' + json);
}, function(error) {
console.error('出错了', error);
});上面代码中,
getJSON
是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise
对象。
需要注意的是,在getJSON
内部,resolve
函数和reject
函数调用时,都带有参数。如果调用
resolve
函数和reject
函数时带有参数,那么它们的参数会被传递给回调函数。reject
函数的参数通常是Error
对象的实例,表示抛出的错误;resolve
函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样。 resolve
函数的参数为一个Promise 实例const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
}) const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
}) p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail上面代码中,
p1
是一个 Promise,3 秒之后变为rejected
。p2
的状态在 1 秒之后改变,resolve
方法返回的是p1
。
由于p2
返回的是另一个 Promise,导致p2
自己的状态无效了,由p1
的状态决定p2
的状态。
所以,后面的then
语句都变成针对后者(p1
)。
又过了 2 秒,p1
变为rejected
,导致触发catch
方法指定的回调函数。resolve
或reject
并不会终结 Promise 的参数函数的执行new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
//
//上面代码中,调用
resolve(1)
以后,后面的console.log(2)
还是会执行,并且会首先打印出来。
这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。一般来说,调用
resolve
或reject
以后,Promise 的使命就完成了,后继操作应该放到then
方法里面,而不应该直接写在resolve
或reject
的后面。
所以,最好在它们前面加上return
语句,这样就不会有意外。一般来说,调用
resolve
或reject
以后,Promise 的使命就完成了,后继操作应该放到then
方法里面,而不应该直接写在resolve
或reject
的后面。
所以,最好在它们前面加上return
语句,这样就不会有意外。new Promise((resolve, reject) => {
return resolve(1);
// 后面的语句不会执行
console.log(2);
})
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) {
// ...
});
Promise.prototype.catch()
Promise.prototype.catch
方法是.then(null, rejection)
或.then(undefined, rejection)
的别名,用于指定发生错误时的回调函数。
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
上面代码中,getJSON
方法返回一个 Promise 对象,如果该对象状态变为resolved
,则会调用then
方法指定的回调函数;
如果异步操作抛出错误,状态就会变为rejected
,就会调用catch
方法指定的回调函数,处理这个错误。
另外,then
方法指定的回调函数,如果运行中抛出错误,也会被catch
方法捕获。
Promise.prototype.finally()
finally
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
上面代码中,不管promise
最后的状态,在执行完then
或catch
指定的回调函数以后,都会执行finally
方法指定的回调函数。
Promse.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
。
Promise.resolve()
有时需要将现有对象转为 Promise 对象,Promise.resolve
方法就起到这个作用。
const jsPromise = Promise.resolve($.ajax('/whatever.json'));
面代码将 jQuery 生成的deferred
对象,转为一个新的 Promise 对象。
Promise.resolve
等价于下面的写法。
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
Promise.resolve
方法的参数分成四种情况。
(1)参数是一个 Promise 实例
如果参数是 Promise 实例,那么Promise.resolve
将不做任何修改、原封不动地返回这个实例。
(2)参数是一个thenable
对象
thenable
对象指的是具有then
方法的对象,比如下面这个对象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
}; let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); //
});
Promise.resolve
方法会将这个对象转为 Promise 对象,然后就立即执行thenable
对象的then
方法。
上面代码中,thenable
对象的then
方法执行后,对象p1
的状态就变为resolved
,从而立即执行最后那个then
方法指定的回调函数,输出 42。
(3)参数不是具有then
方法的对象,或根本就不是对象
如果参数是一个原始值,或者是一个不具有then
方法的对象,则Promise.resolve
方法返回一个新的 Promise 对象,状态为resolved
。
const p = Promise.resolve('Hello'); p.then(function (s){
console.log(s)
});
// Hello
上面代码生成一个新的 Promise 对象的实例p
。
由于字符串Hello
不属于异步操作(判断方法是字符串对象不具有 then 方法),返回 Promise 实例的状态从一生成就是resolved
,
所以回调函数会立即执行。Promise.resolve
方法的参数,会同时传给回调函数。
(4)不带有任何参数
Promise.resolve()
方法允许调用时不带参数,直接返回一个resolved
状态的 Promise 对象。
所以,如果希望得到一个 Promise 对象,比较方便的方法就是直接调用Promise.resolve()
方法。
const p = Promise.resolve(); p.then(function () {
// ...
});
上面代码的变量p
就是一个 Promise 对象。
需要注意的是,立即resolve()
的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。
setTimeout(function () {
console.log('three');
}, 0); Promise.resolve().then(function () {
console.log('two');
}); console.log('one'); // one
// two
// three
上面代码中,setTimeout(fn, 0)
在下一轮“事件循环”开始时执行,Promise.resolve()
在本轮“事件循环”结束时执行,console.log('one')
则是立即执行,因此最先输出。
Promise.reject()
Promise.reject(reason)
方法也会返回一个新的 Promise 实例,该实例的状态为rejected
。
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了')) p.then(null, function (s) {
console.log(s)
});
// 出错了
上面代码生成一个 Promise 对象的实例p
,状态为rejected
,回调函数会立即执行。
注意,Promise.reject()
方法的参数,会原封不动地作为reject
的理由,变成后续方法的参数。这一点与Promise.resolve
方法不一致。
onst thenable = {
then(resolve, reject) {
reject('出错了');
}
}; Promise.reject(thenable)
.catch(e => {
console.log(e === thenable)
})
// true
上面代码中,Promise.reject
方法的参数是一个thenable
对象,执行以后,后面catch
方法的参数不是reject
抛出的“出错了”这个字符串,而是thenable
对象。
应用
- 加载图片
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
}; Generator 函数与 Promise 的结合
function getFoo () {
return new Promise(function (resolve, reject){
resolve('foo');
});
} const g = function* () {
try {
const foo = yield getFoo();
console.log(foo);
} catch (e) {
console.log(e);
}
}; function run (generator) {
const it = generator(); function go(result) {
if (result.done) return result.value; return result.value.then(function (value) {
return go(it.next(value));
}, function (error) {
return go(it.throw(error));
});
} go(it.next());
} run(g);上面代码的 Generator 函数
g
之中,有一个异步操作getFoo
,它返回的就是一个Promise
对象。函数run
用来处理这个Promise
对象,并调用下一个next
方法。
相关资料:
【ES6 】Promise的更多相关文章
- 【ES6】 Promise / await / async的使用
为什么需要在项目中引入promise? 项目起因:我们在页面中经常需要多次调用接口,而且接口必须是按顺序串联调用 (即A接口调用完毕,返回数据后,再调用B接口) 这样就会造成多次回调,代码长得丑,而且 ...
- 【es6】promise
一.什么是promise?我们用promise解决什么样的问题 promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息:从本意上讲,它是承诺,它承诺 ...
- 【ES6】更易于继承的类语法
和其它面向对象编程语言一样,ES6 正式定义了 class 类以及 extend 继承语法糖,并且支持静态.派生.抽象.迭代.单例等,而且根据 ES6 的新特性衍生出很多有趣的用法. 一.类的基本定义 ...
- 【ES6】改变 JS 内置行为的代理与反射
代理(Proxy)可以拦截并改变 JS 引擎的底层操作,如数据读取.属性定义.函数构造等一系列操作.ES6 通过对这些底层内置对象的代理陷阱和反射函数,让开发者能进一步接近 JS 引擎的能力. 一.代 ...
- 【ES6】迭代器与可迭代对象
ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方 ...
- 【javascript】Promise/A+ 规范简单实现 异步流程控制思想
——基于es6:Promise/A+ 规范简单实现 异步流程控制思想 前言: nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套.难以理解的代码让 ...
- 【ES6】数组的扩展——扩展运算符
1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...
- 【ES6】Generator+Promise异步编程
一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...
- 【es6】js原生的promise
JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScr ...
随机推荐
- ArcGIS超级工具SPTOOLS-拓扑错误处理
1.1 删除线面直线上的点 操作视频: https://weibo.com/tv/v/Hxjgmuv6F?fid=1034:4379388532225679 删除面要素.线要素一条边直线上的点. 1 ...
- 粘性定位 sticky
position:sticky 粘性定位 top:200px 这是他的阈值,意思是当我们页面滚动到 200 像素的使用,我们的元素会自动变成固定定位,不到200像素的时候,我们的元素走的是相对定位 ...
- 会声会影x7 每次安装均会提示:已安装这个产品的另一个版本
会声会影x7 每次安装均会提示:已安装这个产品的另一个版本 卸载C++2008 的库就行了 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论
- LeetCode 被围绕的区域
给定一个二维的矩阵,包含 'X' 和 'O'(字母 O). 找到所有被 'X' 围绕的区域,并将这些区域里所有的 'O' 用 'X' 填充. 示例: X X X X X O O X X X O X X ...
- eclipse快捷键整理
编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等)Ctrl+Shift+F 格式化当前代码Ctrl+Shift+M 添加类的i ...
- 大数据(2)---HDFS集群搭建
一.准备工作 1.准备几台机器,我这里使用VMware准备了四台机器,一个name node,三个data node. VMware安装虚拟机:https://www.cnblogs.com/niju ...
- pyenv激活虚拟环境失败
在使用 pyenv 版本管理工具时激活虚拟环境报错 $ pyenv virtualenvs #列出当前虚拟环境 $ pyenv activate env-3.6.0 #激活虚拟环境 报错信息: Fa ...
- 【计算机视觉】MTCNN基于NCNN的测试过程
前言 操作过程 NCNN: https://github.com/Tencent/ncnn/wiki/how-to-build#build-for-linux-x86; vector初始化: int ...
- 子组件props接受父组件传递的值,能不能修改的问题
参考链接:https://www.cnblogs.com/pangchunlei/p/11139356.html
- cent7配置阿里yum源
阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/CentOS系统更换软件安装源第一步:备份你的原镜像文件,以免出错后可以恢复.mv /etc/yum.repos.d ...