javascript 是一种强大的单线程编程语言,广泛用于 web 开发。 javascript 中的一个常见挑战是处理异步任务,例如从 api 获取数据或执行时间敏感的操作,而不阻塞主线程。随着时间的推移,开发人员已经从使用回调转向使用 promise,现在使用更优雅的 async/await 语法来管理异步操作。本指南将引导您逐步了解这些概念,从基础知识开始直至高级场景。到最后,您将能够在现实应用程序中自信地使用异步 javascript。
在 javascript 中,从服务器获取数据、读取文件或设置超时等任务可能需要时间才能完成。 javascript 允许这些任务异步运行,而不是等待这些任务完成(这会阻止程序其余部分的执行)。这意味着它们的处理独立于主程序流程,允许其他代码立即执行。
回调是作为参数传递给另一个函数的函数。当第一个函数完成其操作时,它会执行回调函数以表示完成。
function fetchdata(callback) { settimeout(() => { console.log("data fetched!"); callback(); }, 2000); // simulates a 2-second delay } function processdata() { console.log("processing data..."); } fetchdata(processdata);
说明:
立即学习“Java免费学习笔记(深入)”;
使用嵌套回调处理多个异步任务很快就会导致代码不可读且难以维护。
settimeout(() => { console.log("step 1: data fetched"); settimeout(() => { console.log("step 2: data processed"); settimeout(() => { console.log("step 3: data saved"); }, 1000); }, 1000); }, 1000);
这个“厄运金字塔”使得调试和维护代码变得困难。
promise 是一个对象,表示现在、将来或永远不可用的值。 promise 具有三种状态:
function fetchdata() { return new promise((resolve, reject) => { settimeout(() => { console.log("data fetched!"); resolve("fetched data"); }, 1000); }); } function processdata(data) { return new promise((resolve, reject) => { settimeout(() => { console.log(`processing: ${data}`); resolve("processed data"); }, 1000); }); } function savedata(data) { return new promise((resolve, reject) => { settimeout(() => { console.log(`saving: ${data}`); resolve("data saved"); }, 1000); }); } // chaining promises fetchdata() .then((data) => processdata(data)) .then((processeddata) => savedata(processeddata)) .then((finalresult) => console.log(finalresult)) .catch((error) => console.error("error:", error));
async/await 是 es2017 中引入的语法糖。它使异步代码看起来是同步的,提高了可读性和可维护性。
async function handledata() { try { const fetcheddata = await fetchdata(); const processeddata = await processdata(fetcheddata); const saveddata = await savedata(processeddata); console.log(saveddata); } catch (error) { console.error("error:", error); } } handledata();
当需要并行执行多个独立的异步任务时:
async function fetchalldata() { const task1 = fetchdata(); const task2 = fetchdata(); const results = await promise.all([task1, task2]); console.log("all data fetched:", results); } fetchalldata();
使用异步函数的 try...catch 正确管理错误:
async function fetchwitherrorhandling() { try { const data = await fetchdata(); console.log(data); } catch (error) { console.error("error fetching data:", error); } } fetchwitherrorhandling();
该函数返回一个承诺而不是解析值。这可能会导致意外行为。
async function test() { const result = fetchData(); // Missing await console.log(result); // Logs a Promise, not the resolved value } test();
不,await 只能与 promise 一起使用。然而,像 fetch 和 node.js 的 fs.promises api 这样的库提供了基于原生 promise 的方法。
回调对于小型、简单的任务或使用不支持 promise 的旧 api 时仍然有用。
掌握异步 javascript 对于任何使用现代 web 应用程序的开发人员来说都是至关重要的。从回调开始,您可以了解 promise 和 async/await 如何简化异步代码并提高可读性。谨慎使用回调,利用 promise 实现更好的错误处理,并拥抱 async/await 以获得干净、直观的代码。有了这些工具,您就可以准备好应对项目中的任何异步挑战。
以上就是掌握异步 JavaScript:回调、Promise 和简化的 Async/Await的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号