【Promise】ES6 Promise的使用

AlphaGooo 發(fā)布于2019-08-23 18:26 / 1756人閱讀

摘要：首先，我們?yōu)槭裁匆谜Z法作為替代回調函數(shù)執(zhí)行，作為異步操作的處理方法之一，是解決異步執(zhí)行時候回調函數(shù)嵌套回調函數(shù)這一問題的方法，它更簡潔地控制函數(shù)執(zhí)行流程一般有三種狀態(tài)等待態(tài)，成功態(tài)，失敗態(tài)常見寫法為通常，我們處理異步請求，會使用回調函數(shù)嵌

首先，我們為什么要用Promise語法？
Promise作為替代回調函數(shù)執(zhí)行，作為異步操作的處理方法之一，是解決JS異步執(zhí)行時候回調函數(shù)嵌套回調函數(shù)這一問題的方法，它更簡潔地控制函數(shù)執(zhí)行流程

一般promise有三種狀態(tài)：pending(等待態(tài))，fulfiled(成功態(tài))，rejected(失敗態(tài))；

常見寫法為：

let p = ?new Promise(resolve, reject){}.then（）；

通常，我們處理異步請求，會使用回調函數(shù)嵌套回調函數(shù)
例如：

fn("a", function(a) {
    fn1("b", function(b) {
        fn2("c", function(c) {
            fn3("d", function(d) {
                alert("回調成功，結果為："a+b+c+d")
            })
        })
    })
})

但我們發(fā)現(xiàn)這樣寫的代碼可讀性并不高

如果使用promise語法，則更加符合閱讀習慣，只需要在then函數(shù)中寫處理邏輯即可

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

運行結果為：

接下來模擬在實際項目開發(fā)中，在異步請求完數(shù)據(jù)后處理數(shù)據(jù)的情況，我們在這里用settimeout來模擬異步請求

let mypromise = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("成功!"); 
    }, 1000);
});
mypromise.then(function(successMessage){
    console.log(successMessage);
});

運行結果為:

我們可以看到這里的“成功！”在運行一秒后執(zhí)行

常用API
(1) new Promise

new Promise(function(resolve, reject){
});

(2) PromiseObj.then(resolveFn,rejectFn)
resolveFn：Promise對象成功的回調處理函數(shù)
rejectFn：Promise對象失敗的回調處理函數(shù)

new Promise((resolve,reject)=>{

}).then((resolveData)=>{

},(rejectErr)=>{
    
})

(3) PromiseObj.catch()

new Promise((resolve,reject)=>{

}).catch(err=>{
    console.log(err)
})

（4）PromiseObj.resolve()

Promise.resolve(123).then(data=>{
    console.log(data)
})

GPU云服務器云服務器 es6中的promise Promise使用 promise promise用法

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

轉載請注明本文地址：http://systransis.cn/yun/105213.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
通過 ES6 Promise 和 jQuery Deferred 的異同學習 Promise

摘要：和和都有和，但是略有不同。實際上返回的是一個對象。和添加的回調，添加的回調。所以在調用成功的情況下執(zhí)行添加的回調，調用失敗時執(zhí)行添加的回調。，產(chǎn)生對象并，產(chǎn)生對象并，然后繼續(xù)處理，的語法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過它們的作用可以簡單的用兩句話來描述 Deffere...

Yujiaao 2019-08-21 10:39 評論0 收藏0
JavaScript 異步

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

tuniutech 2019-08-21 18:34 評論0 收藏0
es6 - Promise

摘要：所謂異步編程中的異步是相對于同步的概念的。是一系列異步編程規(guī)范的統(tǒng)稱。如果中的回調函數(shù)返回一個值，那么返回的將會成為接受狀態(tài)，并且將返回的值作為接受狀態(tài)的回調函數(shù)的參數(shù)值。參考介紹基礎篇深入理解與異步編程。 es6 promise與異步編程對于一些還不具備大量編程經(jīng)驗的朋友來說，promise可能是es6比較難以掌握的點。首先是很多名詞，比如Promises，es6 Promise,...

wemallshop 2019-08-22 15:11 評論0 收藏0
淺談ES6原生Promise

摘要：如果有錯誤，則到的第二個回調函數(shù)中，對錯誤進行處理。假設第一個的第一個回調沒有返回一個對象，那么第二個的調用者還是原來的對象，只不過其的值變成了第一個中第一個回調函數(shù)的返回值。 ES6標準出爐之前，一個幽靈，回調的幽靈，游蕩在JavaScript世界。正所謂：世界本沒有回調，寫的人多了，也就有了})})})})})。 Promise的興起，是因為異步方法調用中，往往會出現(xiàn)回調函數(shù)一...

yedf 2019-08-20 10:30 評論0 收藏0
ES6 Promise：模式與反模式

摘要：盡管可以讓代碼更加簡潔易讀，但對于只熟悉回調函數(shù)的人來說，可能對此還是會有所懷疑。始終避免在或使用回調函數(shù)，否則會吞噬任何后續(xù)的錯誤，將其作為鏈的一部分。然而，使用回調函數(shù)，使用所謂的，即第一個參數(shù)是一個錯誤回調變得很常見。原文：ES6 Promises: Patterns and Anti-Patterns作者：Bobby Brennan 當幾年前，第一次使用 NodeJS 的時候...

djfml 2019-08-21 16:49 評論0 收藏0