JavaScript异步编程模型

文章目录

• • 核心概念
  • 案例展示
  • • 使用Promise
    • 使用async/await
    • 扩展案例：根据用户年龄提供优惠
    • • 使用Promise
      • 使用async/await

        核心概念

        JavaScript的异步编程模型主要基于事件循环（Event Loop）、回调函数（Callback）、Promise对象和async/await语法，这些机制让JavaScript能够非阻塞地处理I/O操作，从而实现高效的并发执行。下面是对这些核心概念的简要说明：

        1. 事件循环（Event Loop）:

           JavaScript运行在单线程上，但通过事件循环机制实现了异步执行的能力。事件循环不断地检查任务队列（Task Queue），将可执行的任务放入执行栈中执行。这个过程分为两大类队列：宏任务（Macrotask）队列和微任务（Microtask）队列。宏任务包括setTimeout、setInterval、I/O、UI渲染等；微任务主要包括Promise的回调、MutationObserver、process.nextTick（Node.js环境）等。执行栈为空时，会先执行当前微任务队列中的所有任务，然后再检查宏任务队列，如此循环。

        2. 回调函数（Callback）:

           回调是最原始的异步处理方式。在发起一个异步操作时，传递一个函数作为参数，当异步操作完成时，这个函数（即回调函数）会被调用。这种方式在处理简单异步逻辑时有效，但随着异步调用嵌套增多，容易导致“回调地狱”问题，代码可读性和维护性变差。

        3. Promise对象:

           Promise是ES6引入的一种解决异步编程问题的新方法。Promise代表一个异步操作的结果，它可以处于三种状态之一：pending（进行中）、fulfilled（已成功）或rejected（已失败）。Promise提供了.then和.catch方法来处理成功和失败的情况，支持链式调用，有助于避免回调地狱，使异步代码更加清晰。

        4. async/await语法:

           async/await是基于Promise的更高级的异步编程语法糖，从ES2017开始被引入。使用async关键字声明一个异步函数，该函数内部可以使用await关键字等待Promise的解析，使得异步代码看起来像同步代码一样直观易读。await只能在async函数内部使用，它会使代码暂停在该行直到Promise解决，然后返回Promise的结果，如果Promise被拒绝，则抛出异常。

        JavaScript的异步编程模型通过事件循环机制协调执行环境，结合回调函数、Promise以及async/await等语法，为开发者提供了一套强大且灵活的工具集，以高效地处理异步操作，提升应用性能和用户体验。

        案例展示

        下面是一个结合了Promise和async/await处理异步操作的实际案例，假设我们要从两个不同的API获取数据，并在两者都成功返回后合并处理这些数据。

        使用Promise

        // 假设这是两个获取用户信息和订单信息的异步APIfunction fetchUserInfo(userId) {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve({ id: userId, name: 'Alice', age: 30 });        }, 1000);    });}function fetchOrders(userId) {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve([{ orderId: 1, product: 'Book' }, { orderId: 2, product: 'CD' }]);        }, 800);    });}// 使用Promise.all并行获取数据，然后处理结果Promise.all([fetchUserInfo(1), fetchOrders(1)])    .then(([userInfo, orders]) => {        console.log(`User ${userInfo.name} has the following orders:`);        orders.forEach(order => console.log(order.product));    })    .catch(error => console.error('Error fetching data:', error));

        使用async/await

        async function fetchDataAndProcess() {    try {        const userInfo = await fetchUserInfo(1);        const orders = await fetchOrders(userInfo.id);        console.log(`User ${userInfo.name} has the following orders:`);        orders.forEach(order => console.log(order.product));    } catch (error) {        console.error('Error fetching data:', error);    }}// 调用async函数fetchDataAndProcess();

        在这个案例中，我们首先定义了两个模拟的异步函数fetchUserInfo和fetchOrders，分别用于获取用户信息和订单信息。接着，展示了如何使用Promise.all来并行处理这两个异步操作，以及如何使用async/await语法以更加直观的方式编写相同的逻辑。这两种方式都能有效地处理异步操作，而async/await提供了更为简洁、易于理解和维护的代码结构。

        让我们进一步扩展这个案例，假设在获取到用户信息和订单信息后，我们需要根据用户的年龄对订单进行特定的处理，比如为不同年龄段的用户提供不同的优惠策略。我们将结合之前的代码，展示如何在处理异步数据之后，根据业务逻辑进一步操作。

        扩展案例：根据用户年龄提供优惠

        使用Promise

        function applyDiscountBasedOnAge(userInfo, orders) {    // 示例逻辑：如果用户年龄小于30岁，给予10%折扣    if(userInfo.age  ({...order, discount: '10%' }));    }    return orders;}Promise.all([fetchUserInfo(1), fetchOrders(1)])    .then(([userInfo, orders]) => {        const discountedOrders = applyDiscountBasedOnAge(userInfo, orders);        console.log(`User ${userInfo.name} has the following orders with discounts:`);        discountedOrders.forEach(order =>             console.log(`${order.product} - Discount: ${order.discount || 'None'}`)        );    })    .catch(error => console.error('Error fetching data:', error));

        使用async/await

        async function fetchDataProcessAndApplyDiscount() {    try {        const userInfo = await fetchUserInfo(1);        const orders = await fetchOrders(userInfo.id);                const discountedOrders = applyDiscountBasedOnAge(userInfo, orders);        console.log(`User ${userInfo.name} has the following orders with discounts:`);        discountedOrders.forEach(order =>             console.log(`${order.product} - Discount: ${order.discount || 'None'}`)        );    } catch (error) {        console.error('Error fetching data:', error);    }}// 调用async函数fetchDataProcessAndApplyDiscount();

        在这个扩展案例中，我们新增了一个applyDiscountBasedOnAge函数，它接收用户信息和订单列表作为参数，根据用户的年龄应用相应的折扣策略（这里仅为示例，简化处理逻辑）。无论使用Promise还是async/await，我们都能够在获取数据后立即应用这个业务逻辑，输出带有折扣信息的订单列表。这展示了如何在实际开发中结合异步处理与具体的业务需求，实现复杂的逻辑处理。

        大量H5小游戏、微信小游戏、抖音小游戏源码 试玩地址： https://www.bojiogame.sg 看上哪一款，需要源码的csdn私信我

        ————————————————

        ​最后我们放松一下眼睛