創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有灞橋免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)JavaScript之Async/Await有哪些新語法，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

受到Zeit團(tuán)隊(duì)博文的啟發(fā)，我們的PayPal團(tuán)隊(duì)不久之前將服務(wù)器端數(shù)據(jù)庫遷移到了Async/Await上。我想要和你們分享一下我的經(jīng)驗(yàn)。

首先我們先來了解兩個(gè)術(shù)語：

• Async函數(shù)
• Await 關(guān)鍵詞

你們總是將Async和Await放在一起說，但是你需要知道的是，它們是兩個(gè)不同的東西。對于Async函數(shù)和Await關(guān)鍵詞，你需要了解的是，他們從某種程度上來說當(dāng)然是有一定關(guān)聯(lián)的，但是在沒有Await的情況下，Async函數(shù)依然可以使用。

函數(shù)會返回一個(gè)Promise

當(dāng)你用async關(guān)鍵詞創(chuàng)建一個(gè)函數(shù)的時(shí)候，這個(gè)函數(shù)永遠(yuǎn)都會返回一個(gè)Promise。當(dāng)你在async函數(shù)內(nèi)部進(jìn)行返回的時(shí)候，它會用一個(gè)Promise包裹你的值。

 // here is an async function
 async function getNumber() {

  return 4 // actually returns a Promise
  }
  // the same function using promises
  function getNumber() {

     return Promise.resolve(4)

}

Async函數(shù)和它的基于Promise的Equivalent

除了將你的return轉(zhuǎn)換為Promise之外，async函數(shù)還有一個(gè)特別之處，那就是它是唯一一個(gè)讓你使用await關(guān)鍵詞的地方。

Await讓你可以暫停async函數(shù)的執(zhí)行，直到它受到了一個(gè)promise的結(jié)果。這讓你可以寫出按照執(zhí)行順序顯示的async代碼。

 // async function to show user data
 async function displayUserData() {

    let me = await fetch('/users/me')

    console.log(me)

}// promise-based equivalent
function displayUserData() {

    return fetch('/users/me').then(function(me) {

        console.log(me)

    })

})

Await允許你在不需要callback的情況下寫異步代碼。這樣做的好處是讓你的代碼可讀性更高。而且await可以與任何promise兼容，而不僅僅是用async函數(shù)所創(chuàng)建的promise。

在Async函數(shù)中處理錯(cuò)誤

因?yàn)閍sync函數(shù)也是一個(gè)Promise，當(dāng)你在代碼中放入一個(gè)async函數(shù)的時(shí)候，它會被吸收，然后作為rejected Promise被返回。

 // basic error handling with async functions
 async function getData(param) {

   if (isBad(param)) {     
    throw new Error("this is a bad param")

   }   
   // ...
   }
   // basic promise-based error handling example
   function getData(param) {

   if (isBad(param)) {      
   return Promise.reject(new Error("this is a bad param"))

   }  
    // ...
    }

當(dāng)你使用await調(diào)用Promise的時(shí)候，你可以用try/catch將其包裹，或是你需要在返回的Promise中添加一個(gè)catch handler。

 // rely on try/catch around the awaited Promise

async function doSomething() {   
 try {       
  let data = await getData()

    } catch (err) {       
     console.error(err)

    }

}
// add a catch handlerfunction doSomething() {    
return getData().catch(err => {      
  console.error(err)

    })

}

整合

利用好promise的錯(cuò)誤處理屬性，以及async函數(shù)的簡潔語法，能夠給你帶來一些強(qiáng)大的能力。

在下面這個(gè)簡單的例子中，你會看到我是如何利用async函數(shù)內(nèi)在的錯(cuò)誤處理能力的，它讓我簡化了Express應(yīng)用中的錯(cuò)誤處理流程。

 // catch any errors in the promise and either forward them to next(err) or ignore them
 const catchErrors = fn => (req, res, next) => fn(req, res, next).catch(next)
 const ignoreErrors = fn => (req, res, next) => fn(req, res, next).catch(() => next())
 // wrap my routes in those helpers functions to get error handling
 app.get('/sendMoney/:amount', catchErrors(sendMoney))
 // use our ignoreErrors helper to ignore any errors in the logging middleware
 app.get('/doSomethingElse', ignoreErrors(logSomething), doSomethingElse)
 // controller method can throw errors knowing router will pick it up
 export async function sendMoney(req, res, next) {  
 if (!req.param.amount) {     
 throw new Error('You need to provide an amount!')  

  }  await Money.sendPayment(amount) // no try/catch needed

  res.send(`You just sent ${amount}`)}

// basic async logging middleware
export async function logSomething(req, res, next) {

    // ...    
    throw new Error('Something went wrong with your logging')

    // ...

}

此前，我們一直都在用next(err)來處理錯(cuò)誤。然而，有了async/await，我們可以將錯(cuò)誤放在代碼中的任何位置，然后router會將這些錯(cuò)誤throw到Express提供的next函數(shù)中，這樣就極大的簡化了錯(cuò)誤處理流程。

我用了幾個(gè)小時(shí)的時(shí)間對數(shù)據(jù)庫進(jìn)行了遷移。要想使用這個(gè)方式，你唯一需要的，就是對Promise的深刻理解，以及學(xué)會如何設(shè)置babel。

上述就是小編為大家分享的JavaScript之Async/Await有哪些新語法了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

網(wǎng)站欄目：JavaScript之Async/Await有哪些新語法-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://aaarwkj.com/article24/dgdoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站維護(hù)、自適應(yīng)網(wǎng)站、商城網(wǎng)站、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)