轉【前端基礎進階之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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類