JavaScript 作为一门动态语言，其异步编程的能力非常强大。在 ES6 中，Promise 成为了异步编程的主角，它的链式调用方式比传统的回调函数更加简洁明了。但是，Promise 在处理一组异步操作时，往往需要手动的管理操作的完成与否，比较麻烦。ES7 中引入了扩展操作符，可以简化 Promise 的使用，使得异步编程的体验更加舒适。
Promise 简介
Promise 作为 JavaScript 中的一种异步编程方式，是一种承诺（promise）将来一定会有一个结果的对象。它有三种状态：pending、fulfilled 和 rejected。一旦 Promise 进入了 fulfilled 或 rejected 状态，则该状态就不可改变，且都会有一个对应的返回值。Promise 可以通过 then() 方法注册响应，当 Promise 进入 fulfilled 状态时会调用 resolve 回调函数，进入 rejected 状态时会调用 reject 回调函数。
如下例子，我们可以求出两个异步请求返回的结果之和，其中，fetchPromise 是一个返回 JSON 的 Promise 请求，而timeoutPromise 是一个模拟时间过长的无返回的 Promise 请求：
let fetchPromise = fetch('/api/data.json').then(res => res.json());
let timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => { resolve('timeout!'); }, 3000);
})
Promise.all([fetchPromise, timeoutPromise]).then(([data, msg]) => {
console.log(data.num + ' ' + msg);
});这里使用了 Promise.all，可以等待所有异步操作完成，跟回调函数相比，Promise.all 的代码简洁明了。
扩展操作符
扩展操作符（也叫展开运算符）在 ES6 中出现，用于将一个数组或对象展开。在 ES7 中，扩展操作符对 Promise 提供了更加强大的支持。
在 ES7 中，引入的新符号“…”可以将可迭代对象拆分成多个元素，将异步编程简单了许多。这里我们使用 … 来对一个数组进行操作：
let arr = [1, 2, 3]; console.log(...arr); // 1, 2, 3
而对于 Promise，我们可以使用扩展运算符将其封装成一个数组，在使用 then() 时作为参数传入，这样我们就不需要手动的监控每个异步操作的完成情况了。
Promise.all([...promises]).then(([result1, result2, result3]) => {
console.log(result1, result2, result3);
});接下来，我们写一个使用扩展操作符的例子：
async function getData() {
let data = await fetch('/api/data.json').then(res => res.json());
let msg = await new Promise((resolve, reject) => {
setTimeout(() => { resolve('timeout!'); }, 3000);
});
return `${data.num} ${msg}`;
}
getData().then(result => console.log(result));这里定义了一个 getData 函数，通过扩展操作符将两个异步请求打包成一个 Promise，其结果是两个请求的结果拼接成的字符串。async 和 await 的结合从语法上简化了 Promise 的调用。
总结
ES7 中的扩展操作符在异步编程中提供了更加丰富的支持。我们可以使用 Promise.all 和 “…” 符号让异步编程变得更加简单，代码的可读性也会更好。了解扩展操作符的使用方式，可以让我们在编写异步代码时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6844848841e9894327f51