-

ES6 Promise详解

WEB前端

Promise 是ES6 中一个 JS 的 Promise 类型对象,用来传递异步操作的消息。有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。Promise 也有一些缺点。首先,一旦新建它就会立即执行,无法中途取消Promise。其次,Promise 内部抛出的错误只通过catch捕获。第三,当处于 Pending 状态时,无法得知进度。下面雷雪松就详细的讲解下 Promise 。

1、创建 Promise

1
2
3
4
5
6
7
8
const promise = new Promise((resolve, reject) => {
// do something here ...
if (success) {
resolve(value); // fulfilled
} else {
reject(error); // rejected
}
});

2、Promise 方法
Promise.all(iterable):多个 promise 对象组成的数组。数组中所有的 promise 成功时才会打印 res ,只要有一个失败就会打印 err 。

1
2
3
4
5
6
Promise.all( [Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)])
.then(res=>{
console.log(res) //[ 1, 2, 3]
}).catch(err => {
console.log(err)
});

Promise.allSettled(iterable):每个结果对象,都有一个status 字符串。如果状态为fulfilled,则存在一个value 。如果状态为rejected,则说明原因 。

1
2
3
4
5
Promise.allSettled([Promise.resolve(1), Promise.resolve(2),Promise.resolve(3)])
.then((results) => results.forEach((result) => console.log(result)));
//Object { status: "fulfilled", value: 1 }
//Object { status: "rejected", reason: 2 }
//Object { status: "fulfilled", value: 3 }

Promise.race(iterable):多个 promise 对象组成的数组。任意一个Promise对象状态改变,那么p对象状态也会跟着改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
})
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('failed')
}, 500)
})
Promise.race([promise1 , promise2 ]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) //failed
})

Promise.resolve(value):返回可以是一个Promise对象,或者是一个带then方法的对象。

1
2
3
4
5
Promise.resolve("success").then(function(value) {
console.log(value); // success
}, function(value) {
// 不会被调用
});

Promise.reject(reason):返回一个带有拒绝原因的Promise对象。

1
2
3
4
5
Promise.reject(new Error('failed')).then(function() {
// 不会调用
}, function(error) {
console.error(error); // failed
});

3、Promise 原型方法
Promise.prototype.catch(onRejected); Promise 的失败的情况的回调,promise resolve创建的promise对象,永远不会调用catch方法。

1
2
3
4
let promise = Promise.reject('failed')
promise.catch(err=>{
console.log(err) // failed
})

Promise.prototype.then(onFulfilled, onRejected):Promise 的成功和失败情况的回调

1
2
3
4
5
6
7
8
let promise = new Promise((resolve, reject) => {
resolve('success');
});
promise.then(value => {
console.log(value); // 成功!
}, reason => {
console.error(reason); // 出错了!
});

Promise.prototype.finally(onFinally):在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。

1
2
3
4
5
6
7
8
9
let isLoading = true;
let promise = new Promise((resolve, reject) => {
resolve('success');
});
promise.then(value => {
console.log(value); // 成功!
}, reason => {
console.error(reason); // 出错了!
}).finally(function() { isLoading = false; });

来源:ES6 Promise详解

ES6 Promise详解” 评论

    ad6122 评论:
    2020年7月20日 上午10:06

    天津荣康包装制品有限公司欢迎大家访问www.tjrkbz.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注