使用 async/await 实现 JavaScript 中的异步加载效果-js教程-PHP中文网

使用 async/await 实现 JavaScript 中的异步加载效果

碧海醫心

发布： 2025-10-02 21:22:01

原创

665人浏览过

使用 async/await 实现 javascript 中的异步加载效果

本文将介绍如何使用 async/await 关键字在 JavaScript 中实现异步加载效果，避免 setTimeout 和 setInterval 带来的回调地狱问题。通过创建一个简单的 sleep 函数，结合 async/await，可以使代码看起来更像同步执行，从而提高代码的可读性和可维护性。本文提供了一个完整的示例，模拟了操作系统加载过程，并展示了如何使用 async/await 来控制加载动画的显示和结束。

在 JavaScript 中，处理异步操作的常见方式是使用回调函数、Promise 或 async/await。async/await 提供了一种更简洁、更易于理解的方式来处理异步操作，使代码看起来更像同步代码。

使用 async/await 实现异步加载

下面是一个使用 async/await 实现异步加载的示例，该示例模拟了一个操作系统加载过程，并在控制台中显示加载动画。

首先，定义一个 sleep 函数，该函数返回一个 Promise，该 Promise 在指定的时间后 resolve。

立即学习“Java免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

const sleep = ms => new Promise(r => { setTimeout(r, ms);});

登录后复制

接下来，定义一个 async 函数 OSLoad，该函数模拟操作系统加载过程。该函数使用一个循环来显示加载动画，并在每次循环中使用 await sleep(250) 来暂停 250 毫秒。

async function OSLoad(OS = "", loadingTimeSeconds = 10) {
  var P = ["\", "|", "/", "-"];
  var x = 0;
  for (let lp = 0; lp < loadingTimeSeconds * 4; lp ++) {
    process.stdout.write(
      "
" + P[x++] + " Loading " + OS
    );
    x &= 3;
    await sleep(250);
  }
  process.stdout.write("
" + OS + " is loaded..");
}

登录后复制

最后，调用 OSLoad 函数来启动操作系统加载过程。

OSLoad('Fake OS 4.01');

登录后复制

完整示例代码

下面是完整的示例代码，包括一个简单的控制台模拟器。

//very simple console emulator
const pre = document.querySelector('pre');
const consoleBuffer = new Array(10).fill(' ');
let cpos = 0;
const consoleWrite = txt => {
  const s = txt.split('');
  for (const c of s) {
    if (c === '
') cpos = 0;
    else consoleBuffer[cpos++] = c;
  }
  pre.innerText = consoleBuffer.join('');
}
window.process = { stdout: { write: consoleWrite } };


//OS Loader
const sleep = ms => new Promise(r => { setTimeout(r, ms);});

async function OSLoad(OS = "", loadingTimeSeconds = 10) {
  var P = ["\", "|", "/", "-"];
  var x = 0;
  for (let lp = 0; lp < loadingTimeSeconds * 4; lp ++) {
    process.stdout.write(
      "
" + P[x++] + " Loading " + OS
    );
    x &= 3;
    await sleep(250);
  }
  process.stdout.write("
" + OS + " is loaded..");
}


OSLoad('Fake OS 4.01');

登录后复制

pre {
  height: 90vh;
  background-color: black;
  color: white;
}

登录后复制

注意事项

async 函数必须使用 await 关键字来等待 Promise resolve。
await 关键字只能在 async 函数中使用。
使用 async/await 可以使代码更易于阅读和维护，但也会增加代码的复杂性。

总结

async/await 提供了一种更简洁、更易于理解的方式来处理 JavaScript 中的异步操作。通过创建一个简单的 sleep 函数，结合 async/await，可以使代码看起来更像同步执行，从而提高代码的可读性和可维护性。

以上就是使用 async/await 实现 JavaScript 中的异步加载效果的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

使用JavaScript实现一个简单的进度条组件_javascript UI组件 JavaScript代码混淆与保护 JavaScript中的URLSearchParams对象使用_javascript网络请求使用JavaScript实现一个简单的依赖注入_js架构 JavaScript与Spring事件机制结合的使用方法