欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES7之Async/await的使用詳解

 更新時間：2019年03月28日 15:01:43   作者：Mr.曹  
這篇文章主要介紹了ES7之Async/await的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在 js 異步請求數(shù)據(jù)時，通常，我們多采用回調(diào)函數(shù)的方式解決，但是，如果有多個回調(diào)函數(shù)嵌套時，代碼顯得很不優(yōu)雅，維護成本也相應(yīng)較高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 語法糖可以更好解決多層回調(diào)問題。

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

一個ajax請求時

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

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

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

多個ajax請求時

但是 當(dāng)?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)多個回調(diào)函數(shù)的嵌套，可讀性較差（雖然這種嵌套在平常的開發(fā)中少見，但是在node服務(wù)端開發(fā)時，還是很常見的）

優(yōu)化方法

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

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

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返回結(jié)果了，再繼續(xù)執(zhí)行。
  • await 后面跟著的應(yīng)該是一個promise對象（當(dāng)然，其他返回值也沒關(guān)系，只是會立即執(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(..)也不用寫，可以直接用標(biāo)準(zhǔn)的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ù)

源碼

源碼查看

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論