BlogBlog
首页
  • Vue
  • TypeScript
  • React
  • Angular
  • Node.js
  • 小程序
  • Flutter
  • 数据产品
  • 大数据

    • Hadoop
    • Hive
    • Spark
  • MySQL
  • Redis
  • Java
  • Python
  • Golang
GitHub
首页
  • Vue
  • TypeScript
  • React
  • Angular
  • Node.js
  • 小程序
  • Flutter
  • 数据产品
  • 大数据

    • Hadoop
    • Hive
    • Spark
  • MySQL
  • Redis
  • Java
  • Python
  • Golang
GitHub

Async/Await


/*
async:
用于声明一个异步函数。
异步函数会自动返回一个 Promise 对象。如果函数返回值不是 Promise,它会被自动包装成一个 resolved 的 Promise。

await:
只能在 async 函数内部使用。
用于等待一个 Promise 对象的状态变为 resolved(成功)或 rejected(失败)。
如果 Promise 成功,await 会返回 Promise 的结果值;如果 Promise 失败,await 会抛出异常(可以通过 try...catch 捕获)
*/

// 定义一个返回 Promise 的函数
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
}

// 使用 async 和 await
async function getData() {
    console.log('Fetching data...');
    const result = await fetchData(); // 等待 Promise 完成
    console.log(result); // 输出: Data fetched!
}

getData();



// 示例 2:处理错误
async function fetchDataWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('Error: Failed to fetch data!');
        }, 1000);
    });
}

async function getDataWithErrorHandling() {
    try {
        console.log('Fetching data...');
        const result = await fetchDataWithError(); // 等待 Promise 完成
        console.log(result); // 不会执行
    } catch (error) {
        console.error(error); // 输出: Error: Failed to fetch data!
    }
}

getDataWithErrorHandling();


// 3. 并行执行多个异步任务
// 如果需要同时执行多个异步任务,可以使用 Promise.all 结合 await。
async function fetchUserData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('User data fetched!');
        }, 1000);
    });
}

async function fetchProductData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Product data fetched!');
        }, 1500);
    });
}

async function getAllData() {
    console.log('Fetching all data...');
    const [userData, productData] = await Promise.all([
        fetchUserData(),
        fetchProductData(),
    ]);
    console.log(userData); // 输出: User data fetched!
    console.log(productData); // 输出: Product data fetched!
}

getAllData();

// 4. async 函数的返回值
// async 函数总是返回一个 Promise 对象。即使函数内部返回的是一个非 Promise 值,它也会被包装成一个 resolved 的 Promise。
async function returnValue() {
    return 'Hello, async!';
}

returnValue().then((result) => {
    console.log(result); // 输出: Hello, async!
});

// 5. await 的注意事项
// await 只能在 async 函数中使用,否则会报错。
// 如果 await 后面的表达式不是 Promise,它会自动转换为一个 resolved 的 Promise。
// 如果 await 的 Promise 被 reject,会抛出异常,需要使用 try...catch 捕获。

async function awaitNonPromise() {
    const result = await 42; // 42 会被转换为 Promise.resolve(42)
    console.log(result); // 输出: 42
}

awaitNonPromise();


// 6. 实际应用场景
// async 和 await 常用于以下场景:

// 从 API 获取数据。
// 读取文件或数据库操作。
// 任何需要等待异步操作完成的任务。
// 示例 6:从 API 获取数据

async function fetchUserFromAPI() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        if (!response.ok) {
            throw new Error('Failed to fetch user data');
        }
        const user = await response.json();
        console.log(user);
    } catch (error) {
        console.error(error);
    }
}

fetchUserFromAPI();

// 7. 总结
// async 用于声明异步函数,自动返回 Promise。
// await 用于等待 Promise 完成,只能在 async 函数中使用。
// 使用 try...catch 捕获 await 的异常。
// 结合 Promise.all 可以并行执行多个异步任务。


最近更新:: 2025/4/17 16:24
Contributors: alice