Promise使用

NervosNetwork 發(fā)布于2019-08-23 11:26 / 1689人閱讀

摘要：一旦請求事件多了，就避免不了回調(diào)地獄，回調(diào)很可能容易一層接著一層。的意思是承諾，作用和回調(diào)函數(shù)相似，在未來的某個時刻執(zhí)行某件事情。但是的寫法更加簡約易用，更加符合我們平常的思維。

發(fā)布自Kindem的博客，歡迎大家轉載，但是要注意注明出處。另外，該文章收納在Kindem的個人的 IT 知識整理倉庫，歡迎 Star、Fork、投稿

Promise

由于JavaScript是單線程的，所以回調(diào)是JavaScript中避免不了的，所有的網(wǎng)絡請求、瀏覽器事件都需要使用回調(diào)的方式異步處理。

一旦請求、事件多了，就避免不了回調(diào)地獄，回調(diào)很可能容易一層接著一層。

Promise的意思是承諾，作用和回調(diào)函數(shù)相似，在未來的某個時刻執(zhí)行某件事情。但是Promise的寫法更加簡約易用，更加符合我們平常的思維。

Usage

Promise是一個對象，在ES6已經(jīng)被規(guī)范成了原生JavaScript的一部分，但是在ES6之前，則需要使用第三方庫來實現(xiàn)

Promise分為三個狀態(tài)：

pending: 執(zhí)行中

resolved: 已完成

rejected: 已失敗

Promise對象被實例化的那一刻，傳入構造函數(shù)的方法將會被執(zhí)行，并且進入pending狀態(tài)，而一旦完成或者失敗，則會進入相應的狀態(tài)，這一過程是不可逆的

他的用法(ES6)如下：

let promise = new Promise((resolve, reject) => {
    if (...) {
        // 如果成功了
        resolve(...);
    } else {
        // 如果失敗了
        reject(...);
    }
});

這里的resolve和reject兩個方法可以使用下面的方法來給與:

promise
    .then(onSuccess)
    .catch(onFailed);

傳遞給then的方法將在承諾執(zhí)行成功時被調(diào)用，傳遞給catch的方法將在承諾執(zhí)行失敗時被調(diào)用

更加方便的一點是，Promise往往可以嵌套使用，這樣可以是多個任務有條不紊地進行，假設p1是一個Promise對象而p2、p3都是能夠產(chǎn)生Promise對象的方法(如果直接new那么Promise將會被直接執(zhí)行)，那么你可以這樣寫，使得他們按照順序執(zhí)行，并且可以一次性處理他們產(chǎn)生的錯誤

p1
    .then(p2)
    .then(p3)
    .then(onSuccess)
    .catch(onFailed);

比如:

let p1 = new Promise((resolve, reject) => {
    console.log("p1");
    setTimeout(() => {
        resolve("p2");
    }, 1000)
});

let p2 = (result) => new Promise((resolve, reject) => {
    console.log(result);
    setTimeout(() => {
        resolve("p3");
    }, 2000);
});

let p3 = (result) => new Promise((resolve, reject) => {
    console.log(result);
    setTimeout(() => {
        resolve("over");
    }, 3000);
});

p1
    .then(p2)
    .then(p3)
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

運行可以看見:

p1
p2
p3
over

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/96958.html

實現(xiàn)Promise

摘要：使用是極好的，它是如此有用以至于我覺得應該好好研究一下，甚至是實現(xiàn)一個簡易的版本。構造函數(shù)檢查參數(shù)例如是不是函數(shù)啊初始化，創(chuàng)建對象執(zhí)行因此構造函數(shù)里面?zhèn)魅氲氖橇⒓幢粓?zhí)行的。使用Promise是極好的，它是如此有用以至于我覺得應該好好研究一下Promise，甚至是實現(xiàn)一個簡易的版本。實現(xiàn)之前，我們先來看看Promise的用途：使用Promise callback hell Promi...

xcc3641 2019-08-21 10:39 評論0 收藏0
Promise 中的三兄弟 .all(), .race(), .allSettled()

摘要：對于的來說基元函數(shù)包括組合函數(shù)的類型簽名返回情況完成如果傳入的可迭代對象為空，會同步地返回一個已完成狀態(tài)的。相反，如果是在指定的時間之后完成，剛返回結果就是一個拒絕狀態(tài)的從而觸發(fā)方法指定的回調(diào)函數(shù)。在行中，對每個小任務得到的結果進行匯總。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！從ES6 開始，我們大都使用的是 P...

vspiders 2019-08-26 10:45 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸問題描述在開發(fā)過程中，遇到一個需求：在系統(tǒng)初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
【筆記】你不知道的JS讀書筆記——Promise

摘要：寫在前面這一章的順序對于未接觸過使用過的童鞋而言略抽象了，前邊幾章主要為了說明和之前的異步方式相比有什么優(yōu)勢和它能解決什么問題，后邊才詳解的設計和各種場景下如何使用。建議先了解和簡單使用過后再閱讀，效果更佳。寫在前面：Promise這一章的順序對于未接觸過使用過Promise的童鞋而言略抽象了，前邊幾章主要為了說明Promise和之前的異步方式相比有什么優(yōu)勢和它能解決什么問題，后邊才...

mumumu 2019-08-22 16:44 評論0 收藏0
Promise使用須知

摘要：已完成意味著操作成功完成。處理實例實例生成以后，可以用方法分別指定狀態(tài)和狀態(tài)的回調(diào)函數(shù)。第二個回調(diào)函數(shù)在的狀態(tài)變成時被調(diào)用。方法是的別名，用于指定發(fā)生錯誤時的回調(diào)函數(shù)。具體的使用示例如下情形一全部成功的情況結果為。一.關于Promise promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理和更強大。它由社區(qū)最早提出和實現(xiàn)，ES6將其寫進了語言標準，統(tǒng)一了...

Tikitoo 2019-08-20 15:27 評論0 收藏0
學習 Promise，掌握未來世界 JS 異步編程基礎

摘要：構造函數(shù)規(guī)定，對象是一個構造函數(shù)，用來生成實例。如果中的回調(diào)函數(shù)拋出一個錯誤，那么返回的將會成為拒絕狀態(tài)，并且將拋出的錯誤作為拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值。其實想寫 Promise 的使用已經(jīng)很長時間了。一個是在實際編碼的過程中經(jīng)常用到，一個是確實有時候小伙伴們在使用時也會遇到一些問題。Promise 也確實是 ES6 中對于寫 JS 的方式，有著真正最大影響的 API 特性之一。本...

Vicky 2019-08-23 12:23 評論0 收藏0