ES6 Promise详解

WEB前端 JS开发 2020年6月10日

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

来源：ES6 Promise详解

2 评论 “ES6 Promise详解”

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

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

gg修改器评论:
2022年6月26日下午5:43

哈哈哈哈哈

雷雪松的个人blog

雷雪松的博客，一个优秀的个人技术博客。

ES6 Promise详解

2 评论 “ES6 Promise详解”

发表回复