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

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)會(huì)昌免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

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

我將通過代碼來解釋這些概念。如果你已經(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è)用來獲得返回結(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ù)被鏈接的順序來執(zhí)行。

Async/await

Async/await 是對(duì) 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

以上所有示例都讓功能塊中的代碼異步，沒有一個(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ù)搜索。在開始之前，有幾點(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(); 
 
 
 

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

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

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

增加news APIs

這個(gè)應(yīng)用使用兩個(gè)免費(fèi)的新聞API來獲取數(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來等待axios去獲取數(shù)據(jù)。如果由于任何原因，axios無法從第一個(gè)API獲取數(shù)據(jù)，應(yīng)用將使用第二個(gè)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");   
  
  
  
 } 
 
 
 

接下來提供了一個(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)用的最后一部分是為前端頁面編寫四個(gè).ejs HTML文件。將這些文件保存在“view”文件夾中： 

 
 
 

  
  
  
//header.ejs  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
        
  
  
  
      
  
  
  
                
  
  
  
                    
  
  
  
                      News app