如何使用頂層await簡化JS

這篇文章將為大家詳細(xì)講解有關(guān)如何使用頂層await簡化JS，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

JavaScript 是一種流行的編程語言，最初被設(shè)計為單線程和同步的語言，意味著程序需要在不等待獲取外部資源或者耗時的計算的情況下一步一步的運行。如果腳本需要這樣的資源或計算，這種同步行為將導(dǎo)致錯誤。這會阻塞隊列中的所有其他進(jìn)程運行，無論它們是否依賴于那些阻塞中的任務(wù)。

但很久以前，JavaScript 引入了一個機(jī)制讓其可以在等待外部資源或者耗時任務(wù)的時候去執(zhí)行其剩余的代碼。這種異步行為是通過在函數(shù)上使用回調(diào)或 promise 來實現(xiàn)的。

什么是回調(diào)和promise

我將通過代碼來解釋這些概念。如果你已經(jīng)知道回調(diào)和 promise 是什么，請直接跳到頂層 await 部分和示例應(yīng)用程序。

回調(diào)

在回調(diào)中，一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)；因此，下面 addEventListener 函數(shù)中的第二個參數(shù)是回調(diào)函數(shù)。此回調(diào)將等待第一個 click 事件發(fā)生，然后才執(zhí)行第二個參數(shù)。

const x = document.getElementsByTagName('Button');  x[0].addEventListener('click',() =>{alert("I was clicked")})

這種等待行為使代碼異步。這與同步代碼不同，它可以接著一步一步的運行，而不需要等待資源下載或者耗時進(jìn)程結(jié)束。但要注意，并非所有回調(diào)函數(shù)都是異步的。

Promises

Promises 類似于回調(diào)，它將函數(shù)附加到返回的對象上。但Promises和回調(diào)也有不同，Promises 是專門為異步方法設(shè)計的。它們只有一個參數(shù)和一個用來獲得返回結(jié)果的 then() 函數(shù)。此外，它還可以鏈?zhǔn)降母郊佣鄠€.then() 和 catch() 函數(shù)。

fetch('www.xyz.com/api')  .then((res)=>{let x = res.data; //do something with received data})  .catch((err)=>{console.log(err)})

Promises使用事件隊列并嚴(yán)格遵循異步任務(wù)被鏈接的順序來執(zhí)行。

Async/await

Async/await 是對 Promises 的語法改進(jìn)，以避免鏈?zhǔn)秸{(diào)用。它能使代碼更清晰，更容易理解。await 關(guān)鍵字使代碼暫停，直到 Promises 成功（resolved）或者失?。╮esolved）。

async function asyncwaitcode(){    let getData = await axios('www.xyzdata.org/api')    console.log(getData.data)  }

什么是頂層 await

以上所有示例都讓功能塊中的代碼異步，沒有一個在模塊級工作。

但是，異步行為是可以在模塊級別實現(xiàn)的。使用頂級 await 的模塊會在異步初始化其命名空間后，再通知該模塊的消費者繼續(xù)執(zhí)行它自己的代碼。

下面的示例代碼展示了如何使用頂級 await。

關(guān)于App

此應(yīng)用將從新聞 API 中獲取最熱門的新聞數(shù)據(jù)，并在瀏覽器中呈現(xiàn)。用戶還能以相關(guān)搜索詞的進(jìn)行新聞數(shù)據(jù)搜索。在開始之前，有幾點需要注意：

•  頂級await在node 13.3及更高版中被支持

•  頂級await只在ECMAScript模塊中支持，但Node.js和Express都是CmmonJS模塊。CmmonJS不支持頂級await特性。所以我在代碼中會使用import而不是require

•  在node 14.x之前，頂級await不能直接使用，需要啟用--harmony

•  循環(huán)引用模塊可能會導(dǎo)致死鎖

構(gòu)建App

  1.  創(chuàng)建toplevelawait目錄

$ mkdir toplevelawait

  2.  npm init初始化

$ npm init

  3.package.json中增加"type": "module"，以支持ECMAScript模塊

"author": "",  "license": "ISC",  "type": "module",

 4.在toplevelawait目錄下創(chuàng)建src目錄。注意使用mjs作為文件后綴名。

$ touch app.mjs  $ touch exp.mjs  $ ls -1 src  app.mjs exp.mjs

  5.  安裝依賴axios, ejs和 express

$ npm install axios ejs express --save

  6.  exp.mjs中增加下面代碼:

import express from "express"  export const exp = await express();

注意我們是在沒有async的情況下使用await。這樣express實例會先初始化后再導(dǎo)出給其他模塊。你可以用這種方式等待模塊中某個實例初始化后完成后，再執(zhí)行依賴于該模塊的代碼。

如果一個模塊包含了頂層await，那么它的父模塊的執(zhí)行會停止，直到promise完成。但他的兄弟模塊會繼續(xù)執(zhí)行，和以前的同步模式相同。

要注意Node.js中的模塊加載也是同步的，意味著他不能異步的等待資源加載。但你可以在加載或者處理資源的語句前加上await關(guān)鍵字來實現(xiàn)異步等待。

增加news APIs

這個應(yīng)用使用兩個免費的新聞API來獲取數(shù)據(jù)。兩個API支持回退依賴行為；如果一個API失敗，另一個API將獲取數(shù)據(jù)。這兩個API都使用API密鑰：

•  News API[1]

•  GNews API[2]

在app.mjs文件中插入下面的代碼。前面的目標(biāo)導(dǎo)入axios和在exp.js被初始化的express實例。下一部分設(shè)置視圖引擎，以便在瀏覽器中展示。

import { exp } from "./exp.mjs";  import axios from "axios"  exp.set("view engine","ejs");  // dependency fall back  let response = "";  let site = true;  try{     response = await axios('https://newsapi.org/v2/top-headlines?country=us&apiKey=your-api-key');     }   catch{    response = await axios("https://gnews.io/api/v3/top-news?token=your-api-key");    site = false;   }   // Get top news  exp.get('/',function(req,res){    let responseresponse0 = response.data.articles      res.render('main.ejs',{response0: response0, site:site})   })   // search news  exp.get('/search', function(req,res){    res.render("searchnews.ejs")    })  exp.get('/result', async(req, res)=>{    let x = req.query.newtitlesearch;    let response1 = {}    let data = {}    try{      let url = 'https://newsapi.org/v2/everything?q='+x+'&apiKey=your-api-key'      response1 =  await axios(url);   }    catch{      let url = 'https://gnews.io/api/v3/search?q='+x+'&token=your-api-key'      response1 =  await axios(url)    }    res.render('result.ejs', {response1: response1.data.articles, site: site})    })  exp.listen(3000)

最重要的部分是這個try catch塊，使用到了頂層await來等待axios去獲取數(shù)據(jù)。如果由于任何原因，axios無法從第一個API獲取數(shù)據(jù)，應(yīng)用將使用第二個API獲取數(shù)據(jù)。一旦它從API獲得數(shù)據(jù)，express可以在主頁上呈現(xiàn)它。

try{     response = await axios('https://newsapi.org/v2/top-headlines?country=us&apiKey=your-api-key');    }   catch{    response = await axios("https://gnews.io/api/v3/top-news?token=your-api-key");    }

接下來提供了一個可以讓用戶進(jìn)行搜索的路由：

// search news  exp.get('/search', function(req,res){    res.render("../src/view/searchnews.ejs")  })

最后，另一個路徑展示搜索結(jié)果:

exp.get('/result', async(req,res)=>{    let x = req.query.newtitlesearch;    let response1 = {}    let data = {}    try{      let url = 'https://newsapi.org/v2/everything?q='+x+'&apiKey=your-api-key'     response1 =  await axios(url);    }    catch{      let url = 'https://gnews.io/api/v3/search?q='+x+'&token=your-api-key'      response1 =  await axios(url)    }    res.render('../src/view/result.ejs', {response1: response1.data.articles , site: site})    })

寫前端界面

應(yīng)用的最后一部分是為前端頁面編寫四個.ejs HTML文件。將這些文件保存在“view”文件夾中：

//header.ejs  <!DOCTYPE html>  <head>      <title>newapiapp</title>      <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ></head><body>        <nav class="navbar navbar-default">                <div class="container-fluid">                    <div class="navbar-header">                        <a class="navbar-brand" href="#">News app</a>                    </div>                    <div class="collapse navbar-collapse">                        <ul class="nav navbar-nav navbar-right">                               <li><a href="/">Main</a></li>                                            <li><a href="/search">Search</a></li>                           </ul>                         </div>                </div>        </nav>

//main.ejs  <%include('header');%>  <%let rows = response0%>  <%let sitesiterep = site%>  <div name "container">    <div class="row text-center" style="display:flex; flex-wrap:wrap">      <% for(let i = 0; i < rows.length; i++){%>        <div class="col-md-3 col-sm-6 ">                            <div class="thumbnail" >                              <a href="<%-rows[i].url %>">                                <img src = "<%= siterep ? rows[i].urlToImage :  rows[i].url  %>">                              </a>                                                        </div>                            <div><%= rows[i].title%></div>                                       </div>          <% } %>    </div>    </div>

//searchnews.ejs  <%- include('header');%>    <h2>Search news </h2>    <form action="/result" method="Get">        <input type ="text" placeholder="news title search" name="newtitlesearch"></input>          <input type="submit" placeholder="submit"></input>             </form>

//result.ejs  <%- include('header');%>  <%let rows = response1%>  <%let sitesiterep = site%>  <div name "container">    <div class="row text-center" style="display:flex; flex-wrap:wrap">      <% for(let i = 0; i < rows.length; i++){%>        <div class="col-md-3 col-sm-6 ">                            <div class="thumbnail" >                              <a href="<%-rows[i].url %>">                                <img src = "<%= siterep ? rows[i].urlToImage :  rows[i].url  %>">                              </a>                                                     </div>                            <div><%= rows[i].title%></div>                                           </div>         <% } %>    </div>    </div>

運行app

現(xiàn)在APP已經(jīng)完成，你可以嘗試下。

如果你在使用node.js v13.3 至 v14.0，運行：

$ node --harmony-top-level-await app.js

如果你在使用node.js v14.0以上，你不需要--harmony flag:

$ node app.js

如果你成功構(gòu)建了這個app，那么恭喜你又學(xué)會了一個新的js特性。

關(guān)于“如何使用頂層await簡化JS”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。