JS-12-es6常用知识-async

 

目录

1. 定义与概述

2. 使用方法

3. 注意事项

4. 应用场景

 5. 示例代码

6.总结

---

   async 是 JavaScript（包括 TypeScript）中的一个关键字，用于声明一个函数为异步函数。async其实是一个promise的语法糖，以下是关于 async 的详细解释：

1. 定义与概述

• 关键字：async
• 作用：声明一个函数为异步函数，允许函数内部使用 await 关键字等待 Promise 对象的完成。
• 返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的 return 语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为 undefined。

2. 使用方法

• 声明：在函数定义前加上 async 关键字。

async function myAsyncFunction() {  
  // 函数体  
}

• 与 await 配合使用：在 async 函数内部，可以使用 await 关键字等待一个 Promise 对象的完成，并获取其解析后的值。

async function fetchData() {  
  const data = await getDataFromApi(); // 假设 getDataFromApi 返回一个 Promise  
  console.log(data);  
}

3. 注意事项

• 不要单独使用：如果函数被声明为 async 但没有使用 await，那么该函数将没有实际异步行为，但仍然会返回一个 Promise 对象。

• 错误处理：异步函数内部可以使用 try...catch 结构来捕获由 await 表达式抛出的错误。

async function myAsyncFunction() {  
  try {  
    const data = await getDataFromApi();  
    // 处理数据  
  } catch (error) {  
    // 处理错误  
  }  
}

• 返回值：如果 async 函数返回一个非 Promise 值，该值会被包装在一个已解析的 Promise 中。

4. 应用场景

• 串行处理多个异步操作：使用 async/await 可以避免回调地狱和链式 .then() 方法带来的嵌套问题，使代码逻辑更加清晰、易于维护。
• 处理 I/O 操作：在 Node.js 中，async/await 常用于处理文件 I/O、数据库查询、网络请求等异步操作。

 5. 示例代码

例1：认识async

<script>
    function f1() {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log('你好');
                resolve();
            }, 1000);
        })
    }
    //这是上一篇文章提到的实现方法
    // f1().then(res=>{
    //     console.log('第二步');
    // })

    //async的实现
    (async function () {
        //await是表示这行代码是一个异步操作
        //下面的代码会在这个异步操作之后执行
        //  -->这里的异步操作执行完毕其实就是reslove
        await f1();
        console.log('第二步');

        await f1();

        await f1();

        console.log('第三步');
    })()
</script>

例2：async处理返回值。

await必须是在async函数内部的

<script>
    function q() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve("你好");
            }, 1000)
        })
    }

    //await必须是在async函数内部的
    var o1 = {
        say: async () => {
            console.log('say方法：');

            const res = await q();

            console.log(res);
        },
        run: async function () {
            console.log('run方法');

            const res = await q();

            console.log(res);
        }
    }

    //需求，先执行完毕say，再执行run
    var fn = async function () {
        await o1.say();

        await o1.run();
    }
    fn();
</script>

例3：async错误处理try...catch

<script>
    function q(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject("你好");
            },100)
        })
    }

    (async function(){
        try{
            let res = await q();
            console.log(res);
        }catch(e){
            console.log(e);
        }
    })()
</script>

6.总结

1.  await可以执行异步操作，但是await必须在async函数内执行
2. await操作可以有返回值，这个返回值表示promise操作成功的返回值
3. 如果await里面执行的异步操作发生了reject，或者发生了错误，那么只能使用try...catch语法来进行错误处理