首頁 > 文章 > web前端 > 如何在JavaScript中的非同步函數之外使用await？

如何在JavaScript中的非同步函數之外使用await？

WBOY轉載: 2023-08-26 16:53:021138瀏覽

在 JavaScript 中，async-await 關鍵字用於使函數非同步。如果我們將任何函數設為非同步，它就會像多執行緒一樣運作並並行執行程式碼，這有助於我們提高應用程式效能。

在這裡，我們將學習在非同步函數之外使用await關鍵字。

立即呼叫函數

我們將使用此方法中的表達式來立即呼叫該函數。我們可以將await關鍵字與promise或函數內的任何其他函數一起使用。

文法

使用者可以按照以下語法使用函數表達式立即呼叫函數。

(async () => {
   let result = await fetchData();
})();

在上面的語法中，我們沒有建立函數，但在大括號內，我們使用 async 和await 關鍵字編寫了箭頭函數語法。

範例 1

在下面的範例中，我們在定義函數後立即呼叫該函數。在表達式內部，我們定義了箭頭函數。在箭頭函數的程式碼區塊中，我們使用了await關鍵字和axios來從API中取得資料。

我們在

部分添加了 CDN 以使用 axios。在輸出中，使用者可以觀察我們從 API 取得的資料。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>await</i> with immediately invoking function expression.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      (async () => {
         let result = await axios.get("https://dummyjson.com/products/1");

         output.innerHTML += "The results from the API is <br/>";
         for (let key in result.data) {
            output.innerHTML += key + " : " + result.data[key] + "<br/>";
         }
      })();
   </script>
</body>
</html>

使用承諾

我們可以使用 Promise 取代非同步函數來等待，直到收到伺服器的回應或暫停程式碼的執行。

文法

使用者可以依照下列語法在 JavaScript 中使用 Promise。

promise.then((response) => {
   // use response
})
.catch((err) => {
   // handle the errors
})

在上面的語法中，我們使用了 then() 和 catch() 區塊以及 Promise 來處理回應和錯誤。

範例 2

在下面的範例中，我們執行與範例 1 相同的操作。在範例 1 中，我們使用 async-await 語法和 axios 來取得資料。在這裡，我們使用 axios 的 Promise 來獲取資料。 axios.get() 方法傳回 Promise，我們使用 then() 和 catch() 區塊來解析該 Promise。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (() => {
         axios.get("https://dummyjson.com/products/1").then((result) => {

            output.innerHTML += "The results from the API is <br/>";
            for (let key in result.data) {
                  output.innerHTML += key + " : " + result.data[key] + "<br/>";
            }
         })
         .catch((err) => {
            output.innerHTML += "The error is " + err;
         })
      })();
   </script>
</body>
</html>

範例 3

在此範例中，我們使用帶有 new 關鍵字的 Promise() 建構函式建立了一個 Promise。我們正在拒絕這個承諾。

之後，我們使用 then() 和 catch() 區塊以及 SamplePromise Promise 變數來從 Promise 取得回應或錯誤。使用者可以觀察到控制權轉到輸出中的 catch() 區塊，因為我們拒絕了錯誤。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let SamplePromise = new Promise((resolve, reject) => {
         reject("Promise is rejected without any error");
      })
      SamplePromise.then((response)=>{
         output.innerHTML += "Response from the promise is " + response;
      })
      .catch((err)=>{
         output.innerHTML += "The error message is - " + err;
      })
   </script>
</body>
</html>

本教學教導使用者在非同步函數之外使用await關鍵字。此外，我們也解釋了使用 Promise 來使用 async-await 關鍵字的替代方法。

以上是如何在JavaScript中的非同步函數之外使用await？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript 构造函数 catch 线程多线程 promise 异步

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 中如何檢查值是否為原始值？下一篇：JavaScript 中如何檢查值是否為原始值？

看更多