javascript中的 async与await

一、async 函数概述

1. async 函数的定义

async 函数是 JavaScript 中用来处理异步操作的一种声明方式，它的出现极大地简化了异步代码的编写。通过在函数前加上 async 关键字，我们可以将这个函数定义为异步函数，并允许在函数内部使用 await 来暂停函数的执行，等待异步操作完成。

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

2、async 函数的返回值

一个 async 函数始终返回一个 Promise 对象。即使函数内部返回的是一个普通值，该值也会被包装成 Promise，因此我们可以通过 .then() 方法来处理返回结果，或者使用 await 来获取返回值。

async function example() {
  return 'Hello, async!';
}

// 使用 then() 处理返回值
example().then(value => console.log(value)); // 输出：Hello, async!

// 或者使用 await 处理返回值
(async () => {
  let result = await example();
  console.log(result); // 输出：Hello, async!
})();

3. 异常处理

async 函数内部抛出的异常会被自动封装到返回的 Promise 中。因此，我们可以通过 .catch() 或者 try...catch 语句来捕获这些异常。

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

二：await 关键字详解

1. await 的作用

await 关键字只能在 async 函数中使用，它的作用是暂停 async 函数的执行，等待一个 Promise 对象的结果。在 Promise 被 resolve 后，await 表达式会返回 Promise 的结果。如果 Promise 被 reject，则 await 会抛出异常。

async function getResult() {
  let result = await someAsyncFunction();
  console.log(result);
}

2. await 的执行顺序

在 await 等待 Promise 结果的过程中，JavaScript 的事件循环会继续执行其他任务，而不会阻塞整个程序。仅当 Promise 完成后，async 函数才会继续往下执行。这种机制保证了程序的高效性。

async function example() {
  console.log('Start');
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('End');
}

example();
console.log('Running...');

在上述代码中，Start 和 Running... 会立即输出，而 End 会在两秒后输出。

 

案例01：

 <script>
     function executeAsync(){
         setTimeout(()=>{
             console.log("执行完毕executeAsync");
         },30000);
         return 122;
     }
     async function execute(){
         let result = await executeAsync();
         console.log("result:"+result);
         return "execute执行完成";
     }
     let _execute = execute();
     _execute.then((data)=>{
         console.log("data:"+data);
     });
     console.log("_execute:",_execute);
 </script>

执行结果：

_execute: Promise {<pending>}
 result:122
data:execute执行完成

执行完毕executeAsync

案例02：

 

<script>
    function executePromise(){
        let promise=new Promise((resolve)=>{
            setTimeout(()=>{
            console.log("执行完毕executePromise_Log");
            resolve("执行完毕executePromise");
        },10000);
        });
        return promise;
    }
    async function execute(){
        let result = await executePromise();
        console.log("result:"+result);
        return "execute执行完成";
    }
    let _execute = execute();
    _execute.then((data)=>{
        console.log("data:"+data);
    });
    console.log("_execute:",_execute);
</script>

 

执行结果：

_execute: Promise {<pending>}

执行完毕executePromise_Log
result:执行完毕executePromise
data:execute执行完成