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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了和田免費(fèi)建站歡迎大家使用！

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

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

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

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

回調(diào)

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

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

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

Promises

Promises 類似于回調(diào)，它將函數(shù)附加到返回的對(duì)象上。但Promises和回調(diào)也有不同，Promises 是專門為異步方法設(shè)計(jì)的。它們只有一個(gè)參數(shù)和一個(gè)用來(lái)獲得返回結(jié)果的 then() 函數(shù)。此外，它還可以鏈?zhǔn)降母郊佣鄠€(gè).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使用事件隊(duì)列并嚴(yán)格遵循異步任務(wù)被鏈接的順序來(lái)執(zhí)行。

Async/await

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

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

什么是頂層 await

以上所有示例都讓功能塊中的代碼異步，沒(méi)有一個(gè)在模塊級(jí)工作。

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

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

關(guān)于App

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

•  頂級(jí)await在node 13.3及更高版中被支持

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

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

•  循環(huán)引用模塊可能會(huì)導(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();

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

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

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

增加news APIs

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

•  News API[1]

•  GNews API[2]

在app.mjs文件中插入下面的代碼。前面的目標(biāo)導(dǎo)入axios和在exp.js被初始化的express實(shí)例。下一部分設(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)

最重要的部分是這個(gè)try catch塊，使用到了頂層await來(lái)等待axios去獲取數(shù)據(jù)。如果由于任何原因，axios無(wú)法從第一個(gè)API獲取數(shù)據(jù)，應(yīng)用將使用第二個(gè)API獲取數(shù)據(jù)。一旦它從API獲得數(shù)據(jù)，express可以在主頁(yè)上呈現(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");    }

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

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

最后，另一個(gè)路徑展示搜索結(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)用的最后一部分是為前端頁(yè)面編寫四個(gè).ejs HTML文件。將這些文件保存在“view”文件夾中：

//header.ejs                                                                                    News app