建站
咨詢
售后
建站咨詢
新聞中心
在開發(fā)的時候，有時候需要發(fā)很多請求，然后經(jīng)常會面臨嵌套回調(diào)的問題，即在一個回調(diào)里面又嵌了一個回調(diào)，導(dǎo)致代碼層層縮進得很厲害，如下代碼所示：
創(chuàng)新互聯(lián)建站2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元那曲做網(wǎng)站,已為上家服務(wù),為那曲各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575
- ajax({
- url: "/list",
- type: "GET",
- success: function(data) {
- appendToDOM(data);
- ajax({
- url: "/update",
- type: "POST",
- success: function(data) {
- util.toast("Success!");
- })
- });
- }
- });
這樣的代碼看起來有點吃力，這種異步回調(diào)通?？梢杂肞romise優(yōu)化一下，可以把上面代碼改成：
- new Promise(resolve => {
- ajax({
- url: "/list",
- type: "GET",
- success: data => resolve(data);
- })
- }).then(data => {
- appendToDOM(data);
- ajax({
- url: "/update",
- type: "POST",
- success: function(data) {
- util.toast("Successfully!");
- })
- });
- });
Promise提供了一個resolve，方便通知什么時候異步結(jié)束了，不過本質(zhì)還是一樣的，還是使用回調(diào)，只是這個回調(diào)放在了then里面。
當需要獲取多次異步數(shù)據(jù)的時候，可以使用Promise.all解決：
- let orderPromise = new Promise(resolve => {
- ajax("/order", "GET", data => resolve(data));
- });
- let userPromise = new Promise(resolve => {
- ajax("/user", "GET", data => resolve(data));
- });
- Promise.all([orderPromise, userPromise]).then(values => {
- let order = values[0],
- user = values[1];
- });
但是這里也是使用了回調(diào)，有沒有比較優(yōu)雅的解決方式呢?
ES7的await/async可以讓異步回調(diào)的寫法跟寫同步代碼一樣。***個嵌套回調(diào)的例子可以用await改成下面的代碼：
- // 使用await獲取異步數(shù)據(jù)
- let leadList = await new Promise(resolve => {
- ajax({
- url: "/list",
- type: "GET",
- success: data => resolve(data);
- });
- });
- // await讓代碼很自然地像瀑布流一樣寫下來
- appendToDom(leadList);
- ajax({
- url: "/update",
- type: "POST",
- success: () => util.toast("Successfully");
- });
Await讓代碼可以像瀑布流一樣很自然地寫下來。
第二個例子：獲取多次異步數(shù)據(jù)，可以改成這樣：
- let order = await new Promise(
- resolve => ajax("/order", data => resovle(data))),
- user = await new Promise(
- resolve => ajax("/user", data => resolve(data)));
- // do sth. with order/user
這種寫法就好像從本地獲取數(shù)據(jù)一樣，就不用套回調(diào)函數(shù)了。
Await除了用在發(fā)請求之外，還適用于其它異步場景，例如我在創(chuàng)建訂單前先彈一個小框詢問用戶是要創(chuàng)建哪種類型的訂單，然后再彈具體的設(shè)置訂單的框，所以按正常思路這里需要傳遞一個按鈕回調(diào)的點擊函數(shù)，如下圖所示：
但其實可以使用await解決，如下代碼所示：
- let quoteHandler = require("./quote");
- // 彈出框詢問用戶并得到用戶的選擇
- let createType = await quoteHandler.confirmCreate();
quote里面返回一個Promise，監(jiān)聽點擊事件，并傳遞createType：
- let quoteHandler = {
- confirmCreate: function(){
- dialog.showDialog({
- contentTpl: tpl,
- className: "confirm-create-quote"
- });
- let $quoteDialog = $(".confirm-create-quote form")[0];
- return new Promise(resolve => {
- $(form.submit).on("click", function(event){
- resolve(form.createType.value);
- });
- });
- }
- }
這樣外部調(diào)用者就可以使用await，而不用傳遞一個點擊事件的回調(diào)函數(shù)了。
但是需要注意的是await的一次性執(zhí)行特點。相對于回調(diào)函數(shù)來說，await的執(zhí)行是一次性的，例如監(jiān)聽點擊事件，然后使用await，那么點擊事件只會執(zhí)行一次，因為代碼從上往下執(zhí)行完了，所以當希望點擊之后出錯了還能繼續(xù)修改和提交就不能使用await，另外使用await獲取異步數(shù)據(jù)，如果出錯了，那么成功的resolve就不會執(zhí)行，后續(xù)的代碼也不會執(zhí)行，所以請求出錯的時候基本邏輯不會有問題。
要在babel里面使用await，需要：
(1)安裝一個Node包
- npm install –save-dev babel-plugin-transform-async-to-generator
(2)在工程的根目錄添加一個.babelrc文件，內(nèi)容為：
- {
- "plugins": ["transform-async-to-generator"]
- }
(3)使用的時候先引入一個模塊
- require("babel-polyfill");
然后就可以愉快地使用ES7的await了。
使用await的函數(shù)前面需要加上async關(guān)鍵字，如下代碼：
- async showOrderDialog() {
- // 獲取創(chuàng)建類型
- let createType = await quoteHandler.confirmCreate();
- // 獲取老訂單數(shù)據(jù)
- let orderInfo = await orderHandler.getOrderData();
- }
我們再舉一個例子：使用await實現(xiàn)JS版的sleep函數(shù)，因為原生是沒有提供線程休眠函數(shù)的，如下代碼所示：
- function sleep (time) {
- return new Promise(resolve =>
- setTimeout(() => resolve(), time));
- }
- async function start () {
- await sleep(1000);
- }
- start();
babel的await實現(xiàn)是轉(zhuǎn)成了ES6的generator，如下關(guān)鍵代碼：
- while (1) {
- switch (_context.prev = _context.next) {
- case 0:
- _context.next = 2;
- // sleep返回一個Promise對象
- return sleep(1000);
- case 2:
- case "end":
- return _context.stop();
- }
- }
而babel的generator也是要用ES5實現(xiàn)的，什么是generator呢?如下圖所示：
生成器用function*定義，每次執(zhí)行生成器的next函數(shù)的時候會返回當前生成器里用yield返回的值，然后生成器的迭代器往后走一步，直到所有yield完了。
有興趣的可以繼續(xù)研究babel是如何把ES7轉(zhuǎn)成ES5的，據(jù)說原生的實現(xiàn)還是直接基于Promise.
使用await還有一個好處，可以直接try-catch捕獲異步過程拋出的異常，因為我們是不能直接捕獲異步回調(diào)里面的異常的，如下代碼：
- let quoteHandler = {
- confirmCreate: function(){
- $(form.submit).on("click", function(event){
- // 這里會拋undefined異常：訪問了undefined的value屬性
- callback(form.notFoundInput.value);
- });
- }
- }
- try {
- // 這里無法捕獲到異常
- quoteHandler.confirmCreate();
- } catch (e) {
- }
上面的try-catch是沒有辦法捕獲到異常的，因為try里的代碼已經(jīng)執(zhí)行完了，在它執(zhí)行的過程中并沒有異常，因此無法在這里捕獲，如果使用Promise的話一般是使用Promise鏈的catch：
- let quoteHandler = {
- confirmCreate: function(){
- return new Promise(resolve => {
- $(form.submit).on("click", function(event){
- // 這里會拋undefined異常：訪問了undefined的value屬性
- resolve(form.notFoundInput.value);
- });
- });
- }
- }
- quoteHandler.confirmCreate().then(createType => {
- }).catch(e => {
- // 這里能捕獲異常
- });
而使用await，我們可以直接用同步的catch，就好像它真的變成同步執(zhí)行了：
- try {
- createType = await quoteHandler.confirmCreate("order");
- }catch(e){
- console.log(e);
- return;
- }
總之使用await讓代碼少寫了很多嵌套，很方便的邏輯處理，縱享絲滑。
原文鏈接：https://fed.renren.com/2017/10/31/await/
【本文是專欄作者“人人網(wǎng)FED”的原創(chuàng)稿件，轉(zhuǎn)載請通過聯(lián)系原作者獲取授權(quán)】
戳這里，看該作者更多好文
本文標題：如何使用Await減少回調(diào)嵌套
文章源于：http://www.5511xx.com/article/dpjdcop.html
