資訊專欄INFORMATION COLUMN
摘要：前言看到項(xiàng)目里不少人用了的庫類，比如等方式，使用的時(shí)候翻看長長的文檔，真心累覺不愛。用法常用三個(gè)場(chǎng)景。處理異步回調(diào)多個(gè)異步函數(shù)同步處理異步依賴異步回調(diào)封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理處理異步回調(diào)的基本用法，處理異步回調(diào)。
前言
看到項(xiàng)目里不少人用了Promise 的庫類，比如 bluebird、q 、jQuery.Deffered 等 polyfill promise 方式，使用的時(shí)候翻看長長的文檔，真心累覺不愛。
es5 發(fā)展到現(xiàn)在，node 在0.12版本就已經(jīng)支持了promise， 在客戶端，大部分瀏覽器也支持了Promise， 如果要兼容低版本的瀏覽器，可以加上es5-shim等 polyfill promise。
Promise 常用三個(gè)場(chǎng)景。
處理異步回調(diào)
多個(gè)異步函數(shù)同步處理
異步依賴異步回調(diào)
封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理
處理異步回調(diào)Promise 的基本用法， 處理異步回調(diào)。
function Pro1(){
return new Promise(function(resolve, reject) {
setTimeout(function(){
resolve("pro1")
}, 300)
})
}
//調(diào)用
Pro1()
.then(function(data){
console.log(data) //pro1
})
.catch(function(err){
throw new Error(err)
})
多個(gè)異步函數(shù)同步處理
有時(shí)候我們需要發(fā)送兩個(gè)ajax，希望他們能一起把數(shù)據(jù)返回，就可以采用下面的辦法。
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)
})
}
//調(diào)用
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)
})
異步依賴異步回調(diào)
有些場(chǎng)景是一個(gè)異步依賴另一個(gè)異步的返回值的，就可以采用下面的用法。
比如： 用一個(gè)訂單號(hào)異步取到訂單詳情，再用訂單詳情里的商品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)
})
}
//調(diào)用
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)
})
封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理
錯(cuò)誤處理
function ErrorHandler(promiseObj, rejectOrResOrCallback){
return promiseObj.then(null, function(err){
if(!err)
})
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79909.html
摘要：前幾天遇到一個(gè)編程題，要求控制順序執(zhí)行，今天總結(jié)了一下這個(gè)至少有好四種方法都可以實(shí)現(xiàn)，包括嵌套，通過一個(gè)串起來，，實(shí)現(xiàn)，以下逐一介紹。 前幾天遇到一個(gè)編程題，要求控制promise順序執(zhí)行，今天總結(jié)了一下這個(gè)至少有好四種方法都可以實(shí)現(xiàn)，包括promise嵌套，通過一個(gè)promise串起來，generator，async實(shí)現(xiàn)，以下逐一介紹。原題目如下： //實(shí)現(xiàn)mergePromise函...
摘要：異步編程是每個(gè)使用編程的人都會(huì)遇到的問題，無論是前端的請(qǐng)求，或是的各種異步。本文就來總結(jié)一下常見的四種處理異步編程的方法。利用一種鏈?zhǔn)秸{(diào)用的方法來組織異步代碼，可以將原來以回調(diào)函數(shù)形式調(diào)用的代碼改為鏈?zhǔn)秸{(diào)用。 異步編程是每個(gè)使用 JavaScript 編程的人都會(huì)遇到的問題，無論是前端的 ajax 請(qǐng)求，或是 node 的各種異步 API。本文就來總結(jié)一下常見的四種處理異步編程的方法。...
摘要：應(yīng)用的四種請(qǐng)求數(shù)據(jù)模式翻譯原文出處鄙人翻譯略差，別見笑。每個(gè)都有自己的利弊，應(yīng)根據(jù)要求進(jìn)行判斷。二組件在使用框架時(shí)，組件負(fù)責(zé)管理自己的請(qǐng)求和獨(dú)立狀態(tài)。相反，將初始應(yīng)用程序狀態(tài)注入頁面的內(nèi)聯(lián)腳本中，以便應(yīng)用程序作為全局變量在需要時(shí)可用。 Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式 翻譯原文出處：4 AJAX Patterns For Vue.js Apps 鄙人翻譯略差，別見笑。 如果...
摘要：用這種方法清除浮動(dòng)，會(huì)為文檔中增加不必要的結(jié)構(gòu)，不推薦?？梢园?dòng)元素，所以能實(shí)現(xiàn)撐起高度的效果。以上是常用的幾種方法，可以根據(jù)場(chǎng)景的不同選擇適合的。 在頁面布局中經(jīng)常會(huì)用到浮動(dòng)和清除浮動(dòng)的操作，但之前是知其然而不知其所以然，看過多篇文章后，有了一些深入的了解，特整理下來！ 浮動(dòng)的目的： 最初設(shè)計(jì)浮動(dòng)的目的是為了實(shí)現(xiàn)文字等內(nèi)容可圍繞圖像顯示，后來發(fā)現(xiàn)浮動(dòng)方便布局，所以支持浮動(dòng)任何元素...
摘要：這種方式和有異曲同工之處，因?yàn)槭菍?duì)象的構(gòu)造函數(shù)，它的原型對(duì)象也是的方式四這種方式叫做使用對(duì)象字面量創(chuàng)建對(duì)象，這是最簡(jiǎn)單的一種方式，也是我經(jīng)常使用的方法，目的是在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過程。 關(guān)鍵字 Object.create; new Object(); new Fn(); {} 背景 此段可跳過不讀……在平時(shí)的使用中，創(chuàng)建對(duì)象最常用的方式是使用{}直接創(chuàng)建，里面直接寫方法和屬...
閱讀 3277·2021-11-22 14:44
閱讀 1122·2021-11-16 11:53
閱讀 1273·2021-11-12 10:36
閱讀 710·2021-10-14 09:43
閱讀 3703·2019-08-30 15:55
閱讀 3407·2019-08-30 14:14
閱讀 1746·2019-08-26 18:37
閱讀 3420·2019-08-26 12:12
