了解异步 JavaScript-js教程-PHP中文网

了解异步 JavaScript

PHPz

发布： 2024-08-28 06:04:08

原创

612 人浏览过

Understanding Async JavaScript

JavaScript 是一种单线程语言，这意味着它一次只能做一件事。然而，Web 应用程序通常需要执行从服务器获取数据等任务，这可能需要一些时间。如果 JavaScript 必须等待每个任务完成才能继续，那么您的 Web 应用程序将会变得缓慢且无响应。这就是异步（async）JavaScript发挥作用的地方。

什么是异步 JavaScript？

异步 JavaScript 允许您的代码启动一个任务，然后在等待该任务完成时继续执行其他任务。任务完成后，您的代码可以返回并处理结果。这有助于保持您的应用快速响应。

异步 JavaScript 中的关键概念

同步与异步:
- 同步：每个任务都会等待前一个任务完成后再开始。例如：
```
 console.log("Start");
 let result = someFunction(); // This might take a while
 console.log("End");
```
登录后复制
在同步代码中，只有在 someFunction() 完成后才会记录“End”消息，这可能会减慢速度。

异步：任务可以独立启动和完成，因此您的代码不会陷入等待状态。例如：
```
 console.log("Start");
 setTimeout(() => {
     console.log("End");
 }, 2000);
```
登录后复制
这里，“结束”消息将在 2 秒后记录，但与此同时，您的代码可以继续执行其他操作。

回调:

回调是作为参数传递给另一个函数的函数，该函数将在任务完成后执行。
示例：

 function fetchData(callback) {
     setTimeout(() => {
         let data = "Some data";
         callback(data);
     }, 2000);
 }

 fetchData((data) => {
     console.log(data); // This will log "Some data" after 2 seconds
 });

登录后复制

回调是处理异步任务的原始方法，但它们可能会变得复杂，特别是当您有许多任务需要管理时（这称为“回调地狱”）。

承诺：

promise 是一个对象，表示异步任务的最终完成（或失败）及其结果值。
示例：

 let promise = new Promise((resolve, reject) => {
     let success = true;
     if (success) {
         resolve("Task completed successfully!");
     } else {
         reject("Task failed!");
     }
 });

 promise.then((message) => {
     console.log(message);
 }).catch((error) => {
     console.log(error);
 });

登录后复制

resolve：如果任务成功完成，则承诺将被“解析”并带有一个值。
reject：如果任务失败，则 Promise 被“拒绝”并显示错误消息。
.then()：处理 Promise 解决时返回的值。
.catch()：如果 Promise 被拒绝，则处理错误。

异步/等待:
- async 和 await 是现代 JavaScript 功能，使使用 Promise 变得更容易、更具可读性。
- async：使用 async 声明的函数将始终返回一个 Promise。
- await：暂停异步函数的执行，直到承诺得到解决。
- 示例：
```
 async function fetchData() {
     try {
         let data = await someAsyncTask();
         console.log(data);
     } catch (error) {
         console.error("Error:", error);
     }
 }
```
登录后复制