ES7 中新增的同步函数和异步函数的区别
在 ES7 中，新增了 async 和 await 关键字，使得 JavaScript 中的异步编程更加简单和易于理解。但在深入理解它们之前，我们先来了解一下同步函数和异步函数的区别。
同步函数是指程序在执行该函数时，必须等待该函数执行完毕后才能继续执行下一个任务。这意味着该函数会阻塞程序的执行，直到函数返回结果或出现错误。例如：
function syncFunction() {
console.log("This is a synchronous function.");
}
console.log("Before syncFunction is called.");
syncFunction();
console.log("After syncFunction is called.");上述代码中，我们定义了一个同步函数 syncFunction，它会在控制台输出一条消息。然后，在调用该函数之前和之后，分别输出了两条消息。由于该函数是同步的，因此在调用该函数时，程序会停止执行，直到该函数返回结果或出现错误。因此，我们会先看到 "Before syncFunction is called."，然后才会看到 "This is a synchronous function."，最后才会看到 "After syncFunction is called."。
相反，异步函数是指程序在执行该函数时，不必等待该函数执行完毕就可以继续执行下一个任务。这意味着该函数不会阻塞程序的执行，而是在后台执行。例如：
// javascriptcn.com 代码示例
function asyncFunction() {
setTimeout(function() {
console.log("This is an asynchronous function.");
}, 1000);
}
console.log("Before asyncFunction is called.");
asyncFunction();
console.log("After asyncFunction is called.");上述代码中，我们定义了一个异步函数 asyncFunction，它会在 1 秒后在控制台输出一条消息。然后，在调用该函数之前和之后，分别输出了两条消息。由于该函数是异步的，因此在调用该函数时，程序不会停止执行，而是会立即执行下一行代码。因此，我们会先看到 "Before asyncFunction is called."，然后才会看到 "After asyncFunction is called."，最后才会看到 "This is an asynchronous function."。
在 ES7 中，async 和 await 关键字使得异步编程更加简单和易于理解。async 关键字用于定义异步函数，而 await 关键字用于等待异步函数返回结果。例如：
// javascriptcn.com 代码示例
async function fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log(data);
}
console.log("Before fetchData is called.");
fetchData();
console.log("After fetchData is called.");上述代码中，我们定义了一个异步函数 fetchData，它会从指定的 URL 获取数据，并在控制台输出该数据。然后，在调用该函数之前和之后，分别输出了两条消息。由于该函数是异步的，因此在调用该函数时，程序不会停止执行，而是会立即执行下一行代码。然后，程序会等待 fetchData 函数执行完毕，并输出数据，最后才会执行下一行代码。因此，我们会先看到 "Before fetchData is called."，然后才会看到数据，最后才会看到 "After fetchData is called."。
总结
同步函数会阻塞程序的执行，直到函数返回结果或出现错误，而异步函数不会阻塞程序的执行，而是在后台执行。在 ES7 中，async 和 await 关键字使得异步编程更加简单和易于理解。async 关键字用于定义异步函数，而 await 关键字用于等待异步函数返回结果。
示例代码
// javascriptcn.com 代码示例
// 同步函数
function syncFunction() {
console.log("This is a synchronous function.");
}
console.log("Before syncFunction is called.");
syncFunction();
console.log("After syncFunction is called.");
// 异步函数
function asyncFunction() {
setTimeout(function() {
console.log("This is an asynchronous function.");
}, 1000);
}
console.log("Before asyncFunction is called.");
asyncFunction();
console.log("After asyncFunction is called.");
// 使用 async 和 await 的异步函数
async function fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await response.json();
console.log(data);
}
console.log("Before fetchData is called.");
fetchData();
console.log("After fetchData is called.");来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65601a36d2f5e1655da48fbd