Promise 的四種常用方法。

wangzy2019 發布于2019-08-19 18:43 / 1576人閱讀

摘要：前言看到項目里不少人用了的庫類，比如等方式，使用的時候翻看長長的文檔，真心累覺不愛。用法常用三個場景。處理異步回調多個異步函數同步處理異步依賴異步回調封裝統一的入口辦法或者錯誤處理處理異步回調的基本用法，處理異步回調。

前言

看到項目里不少人用了Promise 的庫類，比如 bluebird、q 、jQuery.Deffered 等 polyfill promise 方式，使用的時候翻看長長的文檔，真心累覺不愛。
es5 發展到現在，node 在0.12版本就已經支持了promise，在客戶端，大部分瀏覽器也支持了Promise，如果要兼容低版本的瀏覽器，可以加上es5-shim等 polyfill promise。

用法

Promise 常用三個場景。

處理異步回調

多個異步函數同步處理

異步依賴異步回調

封裝統一的入口辦法或者錯誤處理

處理異步回調

Promise 的基本用法，處理異步回調。

function Pro1(){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve("pro1")
        }, 300)
    })
}
//調用
Pro1()
.then(function(data){
    console.log(data) //pro1
})
.catch(function(err){
    throw new Error(err)
})

多個異步函數同步處理

有時候我們需要發送兩個ajax，希望他們能一起把數據返回，就可以采用下面的辦法。

function Pro1(){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve("pro1")
        }, 300)
    })
}
function Pro2(){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve("pro2")
        }, 300)
    })
}
//調用
var Pro = Promise.all([Pro1(), Pro2()]);
Pro
.then(function(data){
    console.log(data[0], data[1]) //Pro1 Pro2
})
.catch(function(err){
    throw new Error(err)
})

異步依賴異步回調

有些場景是一個異步依賴另一個異步的返回值的，就可以采用下面的用法。
比如：用一個訂單號異步取到訂單詳情，再用訂單詳情里的商品Id獲取到商品詳情。

function Pro1(orderId){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            var orderInfo = {
                orderId: orderId,
                productIds: ["123", "456"]
            }
            resolve(orderInfo.productIds)
        }, 300)
    })
}
function Pro2(productIds){
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            var products = productIds.map(function(productId){
                return {
                    productId: productId,
                    name: "衣服"
                }
            })
            resolve(products)
        }, 300)
    })
}
//調用

Pro1("abc123")
.then(function(productIds){
    console.log("商品id",productIds) 
    return Pro2(productIds)
})
.then(function(products){
    console.log("商品詳情",products) 
})
.catch(function(err){
    throw new Error(err)
})

封裝統一的入口辦法或者錯誤處理 錯誤處理

function ErrorHandler(promiseObj, rejectOrResOrCallback){
    return promiseObj.then(null, function(err){
    if(!err)
    })
}

GPU云服務器云服務器數據遷移的四種方法 activity的四種狀態對數據倉庫分析的四種方式 java中線程的四種狀態

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

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

Promise異步函數順序執行的四種方法

摘要：前幾天遇到一個編程題，要求控制順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括嵌套，通過一個串起來，，實現，以下逐一介紹。前幾天遇到一個編程題，要求控制promise順序執行，今天總結了一下這個至少有好四種方法都可以實現，包括promise嵌套，通過一個promise串起來，generator，async實現，以下逐一介紹。原題目如下： //實現mergePromise函...

Awbeci 2019-08-23 11:28 評論0 收藏0
JavaScript 異步編程的四種方式

摘要：異步編程是每個使用編程的人都會遇到的問題，無論是前端的請求，或是的各種異步。本文就來總結一下常見的四種處理異步編程的方法。利用一種鏈式調用的方法來組織異步代碼，可以將原來以回調函數形式調用的代碼改為鏈式調用。異步編程是每個使用 JavaScript 編程的人都會遇到的問題，無論是前端的 ajax 請求，或是 node 的各種異步 API。本文就來總結一下常見的四種處理異步編程的方法。...

microelec 2019-08-20 17:36 評論0 收藏0
Vue.js應用的四種AJAX請求數據模式

摘要：應用的四種請求數據模式翻譯原文出處鄙人翻譯略差，別見笑。每個都有自己的利弊，應根據要求進行判斷。二組件在使用框架時，組件負責管理自己的請求和獨立狀態。相反，將初始應用程序狀態注入頁面的內聯腳本中，以便應用程序作為全局變量在需要時可用。 Vue.js應用的四種AJAX請求數據模式翻譯原文出處：4 AJAX Patterns For Vue.js Apps 鄙人翻譯略差，別見笑。如果...

iKcamp 2019-08-20 19:00 評論0 收藏0
css清除浮動常用的四種方法實現

摘要：用這種方法清除浮動，會為文檔中增加不必要的結構，不推薦。可以包含浮動元素，所以能實現撐起高度的效果。以上是常用的幾種方法，可以根據場景的不同選擇適合的。在頁面布局中經常會用到浮動和清除浮動的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！浮動的目的：最初設計浮動的目的是為了實現文字等內容可圍繞圖像顯示，后來發現浮動方便布局，所以支持浮動任何元素...

iliyaku 2019-08-29 16:14 評論0 收藏0
JavaScript創建對象的四種方式

摘要：這種方式和有異曲同工之處，因為是對象的構造函數，它的原型對象也是的方式四這種方式叫做使用對象字面量創建對象，這是最簡單的一種方式，也是我經常使用的方法，目的是在于簡化創建包含大量屬性的對象的過程。關鍵字 Object.create; new Object(); new Fn(); {} 背景此段可跳過不讀……在平時的使用中，創建對象最常用的方式是使用{}直接創建，里面直接寫方法和屬...

2450184176 2019-08-22 18:32 評論0 收藏0