ES7中Async/await如何使用

這篇文章給大家介紹ES7中Async/await如何使用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

Promise 對(duì)象用于表示一個(gè)異步操作的最終狀態(tài)（完成或失?。?，以及其返回的值。
await 操作符用于等待一個(gè)Promise 對(duì)象。它只能在異步函數(shù) async function 中使用。
await 表達(dá)式會(huì)暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)，其回調(diào)的resolve函數(shù)參數(shù)作為 await 表達(dá)式的值，繼續(xù)執(zhí)行 async function。

一個(gè)ajax請(qǐng)求時(shí)

通常 使用 ajax 請(qǐng)求數(shù)據(jù)時(shí)，會(huì)

$.ajax({
 url: 'data1.json',
 type: 'GET',
 success: function (res) {
  console.log(res) // 請(qǐng)求成功，則得到結(jié)果res
 },
 error: function(err) {
  console.log(err)
 }
})

上面可以得到我們想要的結(jié)果 res ---> { "url": "data2.json" }

多個(gè)ajax請(qǐng)求時(shí)

但是 當(dāng)?shù)玫降臄?shù)據(jù) res 需要用于另一個(gè) ajax 請(qǐng)求時(shí)，則需要如下寫(xiě)法：

$.ajax({
 url: 'data1.json',
 type: 'GET',
 success: function (res) {
  $.ajax({
   url: res.url, // 將 第一個(gè)ajax請(qǐng)求成功得到的res 用于第二個(gè)ajax請(qǐng)求
   type: 'GET',
   success: function (res) {
    $.ajax({
     url: res.url, // 將第二個(gè)ajax請(qǐng)求成功得到的res 用于第三個(gè)ajax請(qǐng)求
     type: 'GET',
     success: function (res) {
      console.log(res) // {url: "this is data3.json"}
     },
     error: function(err) {
      console.log(err)
     }
    })
   },
   error: function(err) {
    console.log(err)
   }
  })
 },
 error: function(err) {
  console.log(err)
 }
})

上面出現(xiàn)多個(gè)回調(diào)函數(shù)的嵌套，可讀性較差（雖然這種嵌套在平常的開(kāi)發(fā)中少見(jiàn)，但是在node服務(wù)端開(kāi)發(fā)時(shí)，還是很常見(jiàn)的）

優(yōu)化方法

使用 promise 鏈?zhǔn)讲僮?/strong>

如下，使用 Promise，進(jìn)行鏈?zhǔn)讲僮?，可以使上面的異步代碼看起來(lái)如同步般易讀，從回調(diào)地獄中解脫出來(lái)。。

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res);
   },
   error: function(err) {
    reject('請(qǐng)求失敗');
   }
  })
 })
};

ajaxGet('data1.json').then((d) => {
 console.log(d);  // {url: "data2.json"}
 return ajaxGet(d.url);
}).then((d) => {
 console.log(d);  // {url: "data3.json"}
 return ajaxGet(d.url);
}).then((d) => {
 console.log(d);  // {url: "this is data3.json"}
})

Async/await 方法

• async 表示這是一個(gè)async函數(shù)，即異步函數(shù)，await只能用在這個(gè)函數(shù)里面。

• await 表示在這里等待promise返回結(jié)果了，再繼續(xù)執(zhí)行。

• await 后面跟著的應(yīng)該是一個(gè)promise對(duì)象（當(dāng)然，其他返回值也沒(méi)關(guān)系，只是會(huì)立即執(zhí)行，不過(guò)那樣就沒(méi)有意義了…）

• await 操作符用于等待一個(gè)Promise 對(duì)象。它只能在異步函數(shù) async function 中使用。

• await 等待的雖然是promise對(duì)象，但不必寫(xiě).then(..)，直接可以得到返回值。

執(zhí)行一個(gè)ajax請(qǐng)求，可以通過(guò)如下方法：

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('請(qǐng)求失敗')
   }
  })
 })
};

async function getDate() {
 console.log('開(kāi)始')
 let result1 = await ajaxGet('data1.json');
 console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"}
};
getDate();  // 需要執(zhí)行異步函數(shù)

執(zhí)行多個(gè)ajax請(qǐng)求時(shí)：

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('請(qǐng)求失敗')
   }
  })
 })
};

async function getDate() {
 console.log('開(kāi)始')
 let result1 = await ajaxGet('data1.json');
 let result2 = await ajaxGet(result1.url);
 let result3 = await ajaxGet(result2.url);
 console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"}
 console.log('result2 ---> ', result2); // result2 ---> {url: "data3.json"}
 console.log('result3 ---> ', result3); // result3 ---> {url: "this is data3.json"}
};

getDate(); // 需要執(zhí)行異步函數(shù)

async await捕捉錯(cuò)誤:

async await中.then(..)不用寫(xiě)了，那么.catch(..)也不用寫(xiě)，可以直接用標(biāo)準(zhǔn)的try catch語(yǔ)法捕捉錯(cuò)誤。

例如，如果下面的 url 寫(xiě)錯(cuò)了

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url111, // 此處為錯(cuò)誤的 url
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('請(qǐng)求失敗')
   }
  })
 })
};


async function getDate() {
 console.log('開(kāi)始')
 try {
  let result1 = await ajaxGet('data1.json'); // 執(zhí)行到這里報(bào)錯(cuò)，直接跳至下面 catch() 語(yǔ)句
  let result2 = await ajaxGet(result1.url);
  let result3 = await ajaxGet(result2.url);
  console.log('result1 ---> ', result1);
  console.log('result2 ---> ', result2);
  console.log('result3 ---> ', result3);

 } catch(err) {
  console.log(err) // ReferenceError: url111 is not defined
 }
};

getDate(); // 需要執(zhí)行異步函數(shù)

關(guān)于ES7中Async/await如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。