为什么需要异步编程？
随着 web 应用的不断发展，前端 JavaScript 的逻辑越来越复杂，同时需要与服务器进行数据交互。在处理大量数据或网络请求时，同步代码会阻塞主线程的执行，导致界面卡顿甚至崩溃，用户体验极差。异步编程可以将阻塞式调用转化为非阻塞式调用，使得主线程可以同时处理多项任务，提高程序的并发性和响应速度，提升用户体验。
Promise
Promise 是 JavaScript 中处理异步编程的一种方式，它是 ECMAScript 6 引入的语法，目前已经被主流浏览器所支持。它是对回调函数的一种优化，可以有效的避免回调函数会产生的回调地狱现象。
Promise 采用状态机制，分为三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已拒绝）。通过链式调用的方式，在一串任务执行的过程中，第一个任务完成后返回一个 resolved 的 promise，可继续进行下一个任务，此时如果这个标准的 promise 拒绝了，利用它的 catch 方法就可以处理任务失败后的后续操作。
例如，下面代码是一个使用 Promise 处理网络请求的示例：
// javascriptcn.com 代码示例
function get(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = function() {
reject(xhr.statusText);
};
xhr.send();
});
}Generator
Generator 是 ECMAScript 6 中新增的关键字，它可以用于函数的声明，函数内部可以使用 yield 关键字来控制程序的执行，可以实现暂停/继续执行的效果。Generator 可以让开发者撰写的代码像同步代码一样，但执行却是异步的。
通过 Generator，我们可以将一个复杂的异步操作分解为多个小的操作，从而让代码更易于维护和阅读。
例如，下面代码是一个使用 Generator 处理异步流程的示例：
// javascriptcn.com 代码示例
function* asyncGenerator() {
const result1 = yield fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json());
const result2 = yield fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
console.log('result1:', result1);
console.log('result2:', result2);
}
const iterator = asyncGenerator();
const promise1 = iterator.next().value;
promise1.then(result1 => {
const promise2 = iterator.next(result1).value;
promise2.then(result2 => {
iterator.next(result2);
});
});Async / Await
Async / Await 是 ECMAScript 8 中新增的语法，它是 Promise 和 Generator 的结合体，更加方便和简洁。使用 async/await 的方式，代码的逻辑更加清晰明了，不再依赖于多层嵌套的回调函数。
async/await 本质上是 Generator 的语法糖，async 函数返回的是一个 Promise 对象，其实质上就是把 Generator 函数和自动执行器包装了一下，使得在写法上更加简单明了，可以让开发者使用类似于同步代码的方式实现异步流程。使用 async/await 可以有效地避免回调地狱和异常捕获的问题。
例如，下面代码是一个使用 Async / Await 处理异步流程的示例：
// javascriptcn.com 代码示例
async function asyncFunction() {
try {
const result1 = await fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json());
const result2 = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
console.log('result1:', result1);
console.log('result2:', result2);
} catch (error) {
console.log(error);
}
}
asyncFunction();总结
Promise、Generator 和 Async / Await 都是 JavaScript 处理异步编程的解决方案，它们各自具有不同的优势和适用场景。其中 Promise 是当前最广泛应用的方案，Generator 和 Async / Await 则是 Promise 的进一步语法糖，提升了代码的可读性和可维护性，需要较新的浏览器支持。
如果你正在开发 JavaScript 前端应用，使用异步编程可以大大提高程序的性能和用户体验。学习并灵活运用不同的异步编程方案，将有助于提高你的代码质量，使你的应用更加高效、健壮和稳定。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6586540ad2f5e1655d0d2d3a