返回

异步进阶之现代用法与最新技巧

前端

事件循环

事件循环是JavaScript运行时执行代码的基础。它是一个不断循环的过程,从事件队列中读取事件并将其发送到适当的处理程序。当一个函数调用另一个函数时,第一个函数被称为调用函数,第二个函数被称为被调用函数。调用函数会把被调用函数压入事件队列,然后继续执行自己的代码。当事件队列不为空时,事件循环就会把第一个事件从事件队列中取出并执行它。

Promise

Promise是一种用于处理异步操作的JavaScript对象。它代表了一个异步操作的最终完成或失败的状态。当一个异步操作完成后,promise就会被解析,或者当一个异步操作失败时,promise就会被拒绝。其他函数可以使用promise的then()方法来注册回调函数,以便在promise被解析或拒绝时执行这些回调函数。

Async/await

Async/await是ES8中引入的异步编程语法。async函数是一个特殊的函数,它可以包含await表达式。await表达式会暂停async函数的执行,直到它所等待的promise被解析或拒绝。然后,async函数会继续执行并返回promise的解析值或拒绝原因。

微任务/宏任务

微任务和宏任务是JavaScript中两种不同的任务队列。微任务队列比宏任务队列具有更高的优先级。当事件循环执行微任务队列中的任务时,它会阻止宏任务队列中的任务执行。当事件循环执行完微任务队列中的所有任务后,它才会开始执行宏任务队列中的任务。

场景题

Promise then和catch的连接

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出:success
}).catch((error) => {
  console.log(error);
});

Async/await语法

async function asyncFunction() {
  const result = await Promise.resolve('success');
  console.log(result); // 输出:success
}

asyncFunction();

总结

异步编程是JavaScript中非常重要的一个概念。通过对event loop、promise、async/await、微任务/宏任务等概念的理解,我们可以编写出更加高效和可读的代码。