ES7之Async/await的使用詳解
在 js 異步請求數(shù)據(jù)時(shí)，通常，我們多采用回調(diào)函數(shù)的方式解決，但是，如果有多個(gè)回調(diào)函數(shù)嵌套時(shí)，代碼顯得很不優(yōu)雅，維護(hù)成本也相應(yīng)較高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 語法糖可以更好解決多層回調(diào)問題。
Promise 對象用于表示一個(gè)異步操作的最終狀態(tài)（完成或失?。?，以及其返回的值。
await 操作符用于等待一個(gè)Promise 對象。它只能在異步函數(shù) async function 中使用。
await 表達(dá)式會暫停當(dāng)前 async function 的執(zhí)行，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)，其回調(diào)的resolve函數(shù)參數(shù)作為 await 表達(dá)式的值，繼續(xù)執(zhí)行 async function。
一個(gè)ajax請求時(shí)
通常 使用 ajax 請求數(shù)據(jù)時(shí)，會
$.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" }
多個(gè)ajax請求時(shí)
但是 當(dāng)?shù)玫降臄?shù)據(jù) res 需要用于另一個(gè) ajax 請求時(shí)，則需要如下寫法：
$.ajax({
url: 'data1.json',
type: 'GET',
success: function (res) {
$.ajax({
url: res.url, // 將 第一個(gè)ajax請求成功得到的res 用于第二個(gè)ajax請求
type: 'GET',
success: function (res) {
$.ajax({
url: res.url, // 將第二個(gè)ajax請求成功得到的res 用于第三個(gè)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)多個(gè)回調(diào)函數(shù)的嵌套，可讀性較差（雖然這種嵌套在平常的開發(fā)中少見，但是在node服務(wù)端開發(fā)時(shí)，還是很常見的）
優(yōu)化方法
使用 promise 鏈?zhǔn)讲僮?/strong>
如下，使用 Promise，進(jìn)行鏈?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 表示這是一個(gè)async函數(shù)，即異步函數(shù)，await只能用在這個(gè)函數(shù)里面。
- await 表示在這里等待promise返回結(jié)果了，再繼續(xù)執(zhí)行。
- await 后面跟著的應(yīng)該是一個(gè)promise對象（當(dāng)然，其他返回值也沒關(guān)系，只是會立即執(zhí)行，不過那樣就沒有意義了…）
- await 操作符用于等待一個(gè)Promise 對象。它只能在異步函數(shù) async function 中使用。
- await 等待的雖然是promise對象，但不必寫.then(..)，直接可以得到返回值。
執(zhí)行一個(gè)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í)行多個(gè)ajax請求時(shí)：
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捕捉錯(cuò)誤:
async await中.then(..)不用寫了，那么.catch(..)也不用寫，可以直接用標(biāo)準(zhǔn)的try catch語法捕捉錯(cuò)誤。
例如，如果下面的 url 寫錯(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('請求失敗')
}
})
})
};
async function getDate() {
console.log('開始')
try {
let result1 = await ajaxGet('data1.json'); // 執(zhí)行到這里報(bào)錯(cuò)，直接跳至下面 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)文章
JS實(shí)現(xiàn)的通用表單驗(yàn)證插件完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的通用表單驗(yàn)證插件,可針對常見的日期、密碼、姓名等進(jìn)行驗(yàn)證并給出提示信息,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
本文從7個(gè)方面講述 JavaScript 中那些你不很熟知但非常實(shí)用的技巧。2010-04-04
這篇文章主要介紹了使用rollup打包JS的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
小程序組件傳值和引入sass的方法(使用vant Weapp組件庫)
這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
JS判斷字符串變量是否含有某個(gè)字串的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S判斷字符串變量是否含有某個(gè)字串的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript CollectGarbage函數(shù)案例詳解
這篇文章主要介紹了JavaScript CollectGarbage函數(shù)案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了javascript面向?qū)ο筇匦源a實(shí)例,包括類、靜態(tài)成員、對象、重載,需要的朋友可以參考下2014-06-06
Bootstrap 過渡效果Transition 模態(tài)框（Modal）
這篇文章主要介紹了Bootstrap 過渡效果Transition 模態(tài)框（Modal）,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
javascript事件循環(huán)event loop的簡單模型解釋與應(yīng)用分析
這篇文章主要介紹了javascript事件循環(huán)event loop的簡單模型解釋與應(yīng)用,結(jié)合實(shí)例形式分析了javascript事件循環(huán)event loop的與模型原理及使用技巧,需要的朋友可以參考下2020-03-03
本文主要介紹了原生js更改css樣式的兩種方式，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03