JavaScript 为什么可以在async-await调用中使用try-catch

JavaScript的try-catch用于处理发生错误时的错误和异常，这种错误在执行过程中发生，也被称为运行时错误。 ‘async’和’await’是JavaScript中的关键字，用于编写异步代码。async关键字用于声明一个异步函数，这是一个返回promise并可被等待的函数。异步函数用于在后台执行长时间运行的任务，例如进行网络请求或从文件中读取，而不会阻塞主线程的执行。

await关键字用于在异步函数内部暂停函数的执行，直到某个promise被解决。它允许您以类似同步的方式编写异步代码，使其更易读易写。使用async和await可以轻松编写简单易懂的异步代码，而无需使用回调函数或复杂的promise链。让我们通过示例来理解。

示例：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Why is it possible to try-catch  
        an async-await call ? 
    </title> 
</head> 
  
<body> 
    <span>Click the button</span> 
  
    <button onclick="getData()"> 
        Click here 
    </button> 
      
    <script> 
        async function getData() { 
            const rollnodata = await report1; 
            console.log(rollnodata); 
            const biodatas = await getnames(rollnodata[1]); 
            console.log(biodatas); 
            return biodatas; 
        }     
    </script> 
</body> 
  
</html>

输出：

JavaScript 为什么可以在async-await调用中使用try-catch

可以使用try-catch块来处理在使用await关键字的异步函数中可能发生的错误。这是因为await关键字会导致函数暂停并等待异步操作完成，异步操作期间发生的任何错误都可以像其他同步代码一样在try-catch块中捕获。考虑以下使用fetch函数执行HTTP请求并等待响应的异步函数：

async function fetchData() {
    try {
        const response = await fetch('http://...com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
}

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Why is it possible to try-catch 
        an async-await call ? 
    </title> 
</head> 
  
<body> 
    <span>Click the button</span> 
  
    <button onclick="getData()"> 
        Click here 
    </button> 
      
    <script> 
        async function getData() { 
            try { 
  
                const rollnodata = await report1; 
                console.log(rollnodata); 
                const biodatas = await getnames(rollnodata[1]); 
                console.log(biodatas); 
                return biodatas; 
            } 
            catch (error) { 
                console.log(`The error is: ${error}`); 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 为什么可以在async-await调用中使用try-catch

说明： 如果fetch函数遇到错误（例如，URL无效或服务器返回404状态码），错误将被catch块捕获并可以适当处理。需要注意的是，try-catch块只会捕获在异步操作本身中发生的错误（例如，此示例中的fetch函数）。它不会捕获在异步操作启动之前发生的错误（例如，如果URL为null），或在操作完成后发生的错误（例如，如果返回的数据格式无效）。