ES6 从入门到精通 # 19：Promise 对象的其它方法
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 从入门到精通 # 19：Promise 对象的其它方法相关的知识，希望对你有一定的参考价值。
说明
ES6 从入门到精通系列（全23讲）学习笔记。
resolve 跟 reject
能将现有的任何对象转换成 promise 对象
let p =new Promise(resolve => resolve("kaimo"));
console.log(p);
p.then(res =>
console.log(res)
)
all
提供了并行的执行异步操作的行为，用于等资源都加载完了才进行操作，比如一些游戏等资源加载完才进行页面初始化。
let promise1 = new Promise((resolve, reject) => );
let promise2 = new Promise((resolve, reject) => );
let promise3 = new Promise((resolve, reject) => );
let p4 = Promise.all([promise1, promise2, promise3]);
p4.then(() =>
// 三个都成功才算成功
).catch(err =>
// 一个失败则失败
)
race
给某个异步请求设置超时时间，并且在超时之后执行相应的操作
例子：请求图片资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function requestImage(imgSrc)
return new Promise((resolve, reject) =>
const img = new Image();
img.onload = function()
resolve(img);
img.src = imgSrc;
)
function timeout()
return new Promise((resolve, reject) =>
setTimeout(() =>
reject(new Error("图片请求超时"));
, 2000)
)
Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res =>
console.log(res)
document.body.appendChild(res);
).catch(err =>
console.log(err)
)
</script>
</body>
</html>
下面模拟超时，f12 找到 network 选择 slow 3g，禁用缓存
finally
finally() 方法返回一个 Promise。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。这避免了同样的语句需要在 then() 和 catch() 中各写一次的情况。
Promise.race([requestImage("https://kaimo313.github.io/blogs/img/avatar.jpg"), timeout()]).then(res =>
console.log(res)
document.body.appendChild(res);
).catch(err =>
console.log(err)
).finally(() =>
console.log("finally")
)
以上是关于ES6 从入门到精通 # 19：Promise 对象的其它方法的主要内容，如果未能解决你的问题，请参考以下文章
ES6 从入门到精通 # 18：使用 Promise 封装 ajax