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

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

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

一個ajax請求時

通常 使用 ajax 請求數(shù)據(jù)時，會

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

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

多個ajax請求時

但是 當?shù)玫降臄?shù)據(jù) res 需要用于另一個 ajax 請求時，則需要如下寫法：

$.ajax({
 url: 'data1.json',
 type: 'GET',
 success: function (res) {
  $.ajax({
   url: res.url, // 將 第一個ajax請求成功得到的res 用于第二個ajax請求
   type: 'GET',
   success: function (res) {
    $.ajax({
     url: res.url, // 將第二個ajax請求成功得到的res 用于第三個ajax請求
     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)多個回調函數(shù)的嵌套，可讀性較差（雖然這種嵌套在平常的開發(fā)中少見，但是在node服務端開發(fā)時，還是很常見的）

優(yōu)化方法

使用 promise 鏈式操作

如下，使用 Promise，進行鏈式操作，可以使上面的異步代碼看起來如同步般易讀，從回調地獄中解脫出來。。

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

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 表示這是一個async函數(shù)，即異步函數(shù)，await只能用在這個函數(shù)里面。

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

• await 后面跟著的應該是一個promise對象（當然，其他返回值也沒關系，只是會立即執(zhí)行，不過那樣就沒有意義了…）

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

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

執(zhí)行一個ajax請求，可以通過如下方法：

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

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

執(zhí)行多個ajax請求時：

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

async function getDate() {
 console.log('開始')
 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捕捉錯誤:

async await中.then(..)不用寫了，那么.catch(..)也不用寫，可以直接用標準的try catch語法捕捉錯誤。

例如，如果下面的 url 寫錯了

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


async function getDate() {
 console.log('開始')
 try {
  let result1 = await ajaxGet('data1.json'); // 執(zhí)行到這里報錯，直接跳至下面 catch() 語句
  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ù)

關于ES7中Async/await如何使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享名稱：ES7中Async/await如何使用
文章來源：http://jinyejixie.com/article46/pppoeg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站營銷、動態(tài)網站、網站建設、定制開發(fā)、全網營銷推廣、網站排名

廣告

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