82_JS_ES6_异步处理_Promise_Async await_同步和异步（常见的异步：定时器 Ajax）

同步和异步

同步：在同步代码中，每一行代码会按顺序逐行执行，直到当前行代码执行完毕才会执行下一行。同步操作可能导致阻塞，特别是在执行时间较长的任务（如网络请求）时。

异步：异步代码可以在等待操作完成的同时继续执行其他任务，这样可以避免程序在等待期间被阻塞。异步操作通常与回调函数、Promise 或 async/await 结合使用。

回调函数

回调函数：回调函数是一种处理异步操作的传统方法。当异步操作完成时，回调函数被调用。尽管回调函数简单，但在处理多个异步操作时，代码可能会变得难以维护，形成所谓的“回调地狱”。

示例代码：

javascript代码

function fetchData(callback) { setTimeout(() => {

console.log('Data fetched.');

callback('Data'); }

, 1000); }

fetchData(data => {

console.log('Callback received:', data); }

);

Promise

Promise：Promise 提供了比回调函数更强大的功能，能够链式调用，避免了回调地狱。它使得异步代码更具可读性，并能更好地处理错误。

• resolve(value)：将 Promise 状态从“等待中”改为“已完成”并传递结果。
• reject(reason)：将 Promise 状态从“等待中”改为“已拒绝”并传递错误信息。

示例代码：

javascript代码

let myPromise = new Promise((resolve, reject) => {

setTimeout(() => {

let success = true;

if (success) { resolve('Operation succeeded.'); }

else { reject('Operation failed.'); }

}, 1000); }

);

myPromise .then(result => console.log(result))

.catch(error => console.error(error));

Async/Await

async/await：async 和 await 是基于 Promise 的语法糖，使得异步操作更像同步代码，且更易于阅读和维护。async 函数总是返回一个 Promise，而 await 用于等待 Promise 解决。

• async：用于声明异步函数。
• await：用于等待 Promise 解决，必须在 async 函数内部使用。

示例代码：

javascript代码

function fetchData() {

return new Promise((resolve) => {

setTimeout(() => resolve('Data fetched.')

, 1000); }

); }

async function run() {

try { let result = await fetchData();

console.log(result); }

catch (error) { console.error('Error:', error); }

}

run();

常见异步操作

定时器：setTimeout 和 setInterval 是常见的异步操作，用于延迟执行代码或重复执行代码。

示例代码：

javascript代码

setTimeout(() => { console.log('Task executed after 1 second'); }, 1000); setInterval(() => { console.log('Task executed every 2 seconds'); }, 2000);

总结

• 同步操作：按顺序逐行执行，可能会阻塞主线程。
• 异步操作：允许代码在等待期间继续执行其他任务，提高响应速度和效率。
• 回调函数：传统的异步处理方法，但可能导致回调地狱。
• Promise：提供了更清晰的异步处理方式，支持链式调用。
• Async/Await：简化了 Promise 的使用，使异步代码更易读、更像同步代码。