脚本宝典收集整理的这篇文章主要介绍了ES6新特性(二):Promise,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Promise
Promise对象可以这样理解。创建Promise对象表示创建了一个立即执行的代码(通常为ajax、jsonp这类异步代码),并根据设立的条件(例如ajax请求状态为200OK)执行回调函数。Promise对象只会变为两种状态,成功或失败。并承诺这个状态只能由resolve
和reject
来改变,其他人不可以改变(promise的状态,不是指200OK这个成功,意思就是执行完resolve了,PRomise状态就变成成功)。并且承诺状态只会改变一次,状态一旦改变就不会再改变。并承诺无论你什么时候提供回调函数,只要状态改变过(执行过resolve)我就会执行回调函数,你不用担心因为提供回调函数过晚,而错过了状态的改变。
创建Promise对象表示创建了一个立即执行的代码
let promise = new Promise(function(resolve, reject) {
console.LOG('Promise');
resolve();
});
promise.then(function() {
console.log('Resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// Resolved
承诺状态只会改变一次,状态一旦改变就不会再改变。换句话说,回调函数只会执行一次,且成功与失败回调函数只会执行其中一个。
new Promise(function(resolve) {
el.onclick = resolve
}).then(function() {
console.log('clicked')
})
// 点击el元素多次
// clicked(只会打印一次clicked,因为不会出现两次成功状态)
另外一个例子:
VAR p1 = new Promise(function(re, rj) {
rj()
re()
})
p1.
then(function() {
console.log(1)
}, function() {
console.log(2)
})
// 2(re方法不会执行,因为状态已经变为失败)
承诺无论你什么时候提供回调函数,只要状态改变过我就会执行回调函数
const preloadImage = function(path) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
const a = preloadImage('images/1.jPEg')
// 数秒后在控制台写下Promise的回调函数
a
.then(function() {
console.log('image loaded')
})
// image loaded(load事件早已经触发,但是你并没有错过他)
灵活的then方法返回值
then方法如果没有返回另一个Promise对象,则默认返回一个成功状态的新的Promise对象。如果代码中因执行throw语句而抛出错误,则返回一个失败状态的新的Promise对象。
const p1 = new Promise(function(re) {
re('p1')
})
const p2 = new Promise(function(re) {
re('p2')
})
p1
.then(msg => {
console.log(msg);
return p2 // 返回另一个Promise对象
})
.then(msg => {
console.log(msg)
})
// p1
// p2
注意是新的Promise对象。参考下面的例子。下面例子中第二个then方法没有接受到任何参数,因为他是新的Promise对象的回调。
const p1 = new Promise(function(re) {
re('p1')
})
const p2 = new Promise(function(re) {
re('p2')
})
p1
.then(msg => {
console.log(msg);
})
.then(msg => {
console.log(msg);
return p2 // 返回另一个Promise对象
})
.then(msg => {
console.log(msg)
})
// p1
// undefined
// p2
相当于:
const p1 = new Promise(function(re) {
re('p1')
})
const p2 = new Promise(function(re) {
re('p2')
})
p1
.then(msg => {
console.log(msg);
return new Promise(function(re){
re()
})
})
.then(msg => {
console.log(msg);
return p2 // 返回另一个Promise对象
})
.then(msg => {
console.log(msg)
})
// p1
// undefined
// p2
不会被拦截的状态
Promise对象的状态传递是不会被拦截的。例如代码中出现错误会返回一个失败状态的Promise对象,但是这个失败状态不会被拦截,会一直传递到失败回调函数去执行为止。
const p1 = new Promise(function(re) {
re('p1')
})
p1.then(function(p) {
console.log(p)
throw new Error('erro')
})
.then(function() {
console.log(1) // 这个then方法被跳过,因为传递下来的是失败状态的Promise对象
})
.catch(function(er){
console.log(er)
})
// p1
// erro
以上是脚本宝典为你收集整理的ES6新特性(二):Promise全部内容,希望文章能够帮你解决ES6新特性(二):Promise所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。