轉【前端基礎進階之Promise】

来源:http://www.cnblogs.com/myTerritory/archive/2017/05/10/6835379.html
-Advertisement-
Play Games

前言 Promise的重要性我認為我沒有必要多講，概括起來說就是必須得掌握，而且還要掌握透徹。這篇文章的開頭，主要跟大家分析一下，為什麼會有Promise出現。 在實際的使用當中，有非常多的應用場景我們不能立即知道應該如何繼續往下執行。最重要也是最主要的一個場景就是ajax請求。通俗來說，由於網速的 ...


前言

Promise的重要性我認為我沒有必要多講，概括起來說就是必須得掌握，而且還要掌握透徹。這篇文章的開頭，主要跟大家分析一下，為什麼會有Promise出現。

在實際的使用當中，有非常多的應用場景我們不能立即知道應該如何繼續往下執行。最重要也是最主要的一個場景就是ajax請求。通俗來說，由於網速的不同，可能你得到返回值的時間也是不同的，這個時候我們就需要等待，結果出來了之後才知道怎麼樣繼續下去。

複製代碼 
// 簡單的ajax原生實現
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);
    }
}
複製代碼

在ajax的原生實現中，利用了onreadystatechange事件，當該事件觸發並且符合一定條件時，才能拿到我們想要的數據，之後我們才能開始處理數據。

這樣做看上去並沒有什麼麻煩，但是如果這個時候，我們還需要做另外一個ajax請求，這個新的ajax請求的其中一個參數，得從上一個ajax請求中獲取，這個時候我們就不得不如下這樣做：

複製代碼 
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;

var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        result = XHR.response;
        console.log(result);

        // 偽代碼
        var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
        var XHR2 = new XMLHttpRequest();
        XHR2.open('GET', url, true);
        XHR2.send();
        XHR2.onreadystatechange = function() {
            ...
        }
    }
}
複製代碼

當出現第三個ajax(甚至更多)仍然依賴上一個請求的時候，我們的代碼就變成了一場災難。這場災難，往往也被稱為回調地獄。

因此我們需要一個叫做Promise的東西，來解決這個問題。

當然，除了回調地獄之外，還有一個非常重要的需求：為了我們的代碼更加具有可讀性和可維護性，我們需要將數據請求與數據處理明確的區分開來。上面的寫法，是完全沒有區分開，當數據變得複雜時，也許我們自己都無法輕鬆維護自己的代碼了。這也是模塊化過程中，必須要掌握的一個重要技能，請一定重視。

從前面幾篇文中的知識我們可以知道，當我們想要確保某代碼在誰誰之後執行時，我們可以利用函數調用棧，將我們想要執行的代碼放入回調函數中。

複製代碼 
// 一個簡單的封裝
function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    console.log('這裡表示執行了一大堆各種代碼');

    // 其他代碼執行完畢，最後執行回調函數
    want && want();
}

fn(want);
複製代碼

利用回調函數封裝，是我們在初學JavaScript時常常會使用的技能。

確保我們想要的代碼壓後執行，除了利用函數調用棧的執行順序之外，我們還可以利用上一篇文章所述的隊列機制。

複製代碼 
function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    // 將想要執行的代碼放入隊列中，根據事件迴圈的機制，我們就不用非得將它放到最後面了，由你自由選擇
    want && setTimeout(want, 0);
    console.log('這裡表示執行了一大堆各種代碼');
}

fn(want);
複製代碼

如果瀏覽器已經支持了原生的Promise對象，那麼我們就知道，瀏覽器的js引擎里已經有了Promise隊列，這樣就可以利用Promise將任務放在它的隊列中去。

複製代碼 
function want() {
    console.log('這是你想要執行的代碼');
}

function fn(want) {
    console.log('這裡表示執行了一大堆各種代碼');

    // 返回Promise對象
    return new Promise(function(resolve, reject) {
        if (typeof want == 'function') {
            resolve(want);
        } else {
            reject('TypeError: '+ want +'不是一個函數')
        }
    })
}

fn(want).then(function(want) {
    want();
})

fn('1234').catch(function(err) {
    console.log(err);
})
複製代碼

看上去變得更加複雜了。可是代碼變得更加健壯，處理了錯誤輸入的情況。

為了更好的往下擴展Promise的應用，這裡需要先跟大家介紹一下Promsie的基礎知識。

一、 Promise對象有三種狀態，他們分別是：

  • pending: 等待中，或者進行中，表示還沒有得到結果
  • resolved(Fulfilled): 已經完成，表示得到了我們想要的結果，可以繼續往下執行
  • rejected: 也表示得到結果，但是由於結果並非我們所願，因此拒絕執行

這三種狀態不受外界影響，而且狀態只能從pending改變為resolved或者rejected，並且不可逆。在Promise對象的構造函數中，將一個函數作為第一個參數。而這個函數，就是用來處理Promise的狀態變化。

new Promise(function(resolve, reject) {
    if(true) { resolve() };
    if(false) { reject() };
})

上面的resolve和reject都為一個函數，他們的作用分別是將狀態修改為resolved和rejected。

二、 Promise對象中的then方法，可以接收構造函數中處理的狀態變化，並分別對應執行。then方法有2個參數，第一個函數接收resolved狀態的執行，第二個參數接收reject狀態的執行。

複製代碼 
function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    }).then(function() {
        console.log('參數是一個number值');
    }, function() {
        console.log('參數不是一個number值');
    })
}

fn('hahha');
fn(1234);
複製代碼

then方法的執行結果也會返回一個Promise對象。因此我們可以進行then的鏈式執行，這也是解決回調地獄的主要方式。

複製代碼 
function fn(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve();
        } else {
            reject();
        }
    })
    .then(function() {
        console.log('參數是一個number值');
    })
    .then(null, function() {
        console.log('參數不是一個number值');
    })
}

fn('hahha');
fn(1234);
複製代碼

then(null, function() {}) 就等同於catch(function() {})

三、Promise中的數據傳遞

大家自行從下麵的例子中領悟吧。

複製代碼 
var fn = function(num) {
    return new Promise(function(resolve, reject) {
        if (typeof num == 'number') {
            resolve(num);
        } else {
            reject('TypeError');
        }
    })
}

fn(2).then(function(num) {
    console.log('first: ' + num);
    return num + 1;
})
.then(function(num) {
    console.log('second: ' + num);
    return num + 1;
})
.then(function(num) {
    console.log('third: ' + num);
    return num + 1;
});

// 輸出結果
first: 2
second: 3
third: 4
複製代碼

OK，瞭解了這些基礎知識之後，我們再回過頭，利用Promise的知識，對最開始的ajax的例子進行一個簡單的封裝。看看會是什麼樣子。

複製代碼 
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';

// 封裝一個get請求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();

        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}

getJSON(url).then(resp => console.log(resp));
複製代碼

為了健壯性，處理了很多可能出現的異常，總之，就是正確的返回結果，就resolve一下，錯誤的返回結果，就reject一下。並且利用上面的參數傳遞的方式，將正確結果或者錯誤信息通過他們的參數傳遞出來。

 

現在所有的庫幾乎都將ajax請求利用Promise進行了封裝，因此我們在使用jQuery等庫中的ajax請求時，都可以利用Promise來讓我們的代碼更加優雅和簡單。這也是Promise最常用的一個場景，因此我們一定要非常非常熟悉它，這樣才能在應用的時候更加靈活。

四、Promise.all

當有一個ajax請求，它的參數需要另外2個甚至更多請求都有返回結果之後才能確定，那麼這個時候，就需要用到Promise.all來幫助我們應對這個場景。

Promise.all接收一個Promise對象組成的數組作為參數，當這個數組所有的Promise對象狀態都變成resolved或者rejected的時候，它才會去調用then方法。

複製代碼 
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var url1 = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-03-26/2017-06-10';

function renderAll() {
    return Promise.all([getJSON(url), getJSON(url1)]);
}

renderAll().then(function(value) {
    // 建議大家在瀏覽器中看看這裡的value值
    console.log(value);
})
複製代碼

 

五、Promise.race

與Promise.all相似的是，Promise.race都是以一個Promise對象組成的數組作為參數，不同的是，只要當數組中的其中一個Promsie狀態變成resolved或者rejected時，就可以調用.then方法了。而傳遞給then方法的值也會有所不同，大家可以再瀏覽器中運行下麵的例子與上面的例子進行對比。

複製代碼 
function renderRace() {
    return Promise.race([getJSON(url), getJSON(url1)]);
}

renderRace().then(function(value) {
    console.log(value);
})
複製代碼

嗯，我所知道的，關於Promise的基礎知識就這些了，如果還有別的，歡迎大家補充。

轉自：http://www.cnblogs.com/tongkaiqiang/

原文鏈接：http://www.jianshu.com/p/fe5f173276bd


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • bootstrap基礎
    相信大多數後端開發人員的html，css並不是太好（主要說我）。想要做一些網頁效果，難度會比較大。看了下bootstrap這個前端框架，發現這個框架比較好的解決了網頁效果製作中一般性問題。總的來說，bootstrap可以幫助我們在儘量不寫css的情況下，就能實現一些大眾效果。非常適合後臺開發。以下為 ...
  • 在IE8及以下的瀏覽器中，不支持placeholder屬性的解決辦法
    以下代碼解決了在IE8及以下瀏覽器中不支持placeholder屬性。 原理：將placeholder的值作為內容寫入控制項，並添加控制項事件來進行模擬。 ...
  • 使用bootstrap的JS插件實現模態框效果
    在上一篇文章中，我們使用 js+css 實現了模態框效果，在理解了模態框的基本實現方法和實現效果後，我們就要尋找更快捷的方法，又快又好的來完成模態框開發需求，從而節約時間，提高效率。一個好的輪子，不僅能大幅減輕工作量，而且能讓我們的代碼更簡明和優雅。 今天我們選擇使用著名的 bootstrap 庫的 ...
  • 最全元素水平垂直居中方法
    1.水平居中 1.1已知寬度塊元素寬度 : 1.2文本內容居中: 1.3通過表格: 1.4已知寬度,通過設置position:absolute,margin-left為寬度的負一半 1.5未知寬度,通過設置position:absolute 1.6使用flex佈局實現（相容性不好，感覺有點變成浮動的 ...
  • AnjularJS小項目，小案例，練手，猜數字
    之前自己就學了點AnjularJS，都是在菜鳥教程裡面將基礎的只是大致過了一遍，沒怎麼自己動手做什麼東西練練手，但還是覺得紙上得來終覺淺，得知此事要躬行啊，今天就做了個猜數字的小游戲，覺得效果還不錯，心情也大好，看來還是得多練啊。好了，廢話少說，還是說說效果怎麼實現的吧。 既然是AnjularLS項 ...
  • 解決xmapp中Apache埠號占用問題
    【原】解決 "安裝xmapp後Apache不能正常啟動" 問題 小伙伴們安裝xmapp後發現Apache不能正常開啟，下麵給出了不同情況的解決辦法，可以分為以下幾種情況分析問題： （一）是否在本次安裝之前已經安裝過xmapp（沒有請跳過） 在本次安裝之前已經安裝過xmapp，雖然卸載了，但是會有卸載 ...
  • js 跳轉的幾種例子收藏
    history.go(-n) 返回上一頁(n 為返回前幾頁) window.location.reload(); 刷新當前頁面 history.go(-1);window.locatoin.reload(); 等效於 self.location = document.referrer 返回上一頁並刷 ...
  • 遇見未知的CSS
    摘錄自 "《CSS核心技術詳解》" 1.1 CSS中你可能會疑問的幾個問題 1.1.1 在CSS中為什麼要有層疊 在CSS中可能會有多個樣式表同時影響同一個元素的某個屬性，設計這個功能的主要原因有兩個，解決模塊化和作者、用戶、用戶代理樣式衝突。 模塊化 一個頁面中的樣式可以拆分成多個樣式表，代碼如下 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類