前端神器--promise

原創 zhumengzj 2020-02-25 01:38 

Promise in js




回調函數真正的問題在於他剝奪了我們使用 return 和 throw 這些關鍵字的能力。而 Promise 很好地解決了這一切。




2015 年 6 月，ECMAScript 6 的正式版 終於發佈了。


ECMAScript 是 JavaScript 語言的國際標準，JavaScript 是 ECMAScript 的實現。ES6 的目標，是使得 JavaScript 語言可以用來編寫大型的複雜的應用程序，成爲企業級開發語言。


概念


ES6 原生提供了 Promise 對象。


所謂 Promise，就是一個對象，用來傳遞異步操作的消息。它代表了某個未來纔會知道結果的事件（通常是一個異步操作），並且這個事件提供統一的 API，可供進一步處理。


Promise 對象有以下兩個特點。


（1）對象的狀態不受外界影響。Promise 對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。


（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變爲 Resolved 和從 Pending 變爲 Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。


有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操作更加容易。


Promise 也有一些缺點。首先，無法取消 Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。


var promise = new Promise(function(resolve, reject) {
 if (/* 異步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

Promise 構造函數接受一個函數作爲參數，該函數的兩個參數分別是 resolve 方法和 reject 方法。
如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態，從「未完成」變爲「成功」（即從 pending 變爲 resolved）；
如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態，從「未完成」變爲「失敗」（即從 pending 變爲 rejected）。
基本的 api
  1. Promise.resolve()
  2. Promise.reject()
  3. Promise.prototype.then()
  4. Promise.prototype.catch()
  5. Promise.all() // 所有的完成
    var p = Promise.all([p1,p2,p3]);

  6. Promise.race() // 競速，完成一個即可
進階
promises 的奇妙在於給予我們以前的 return 與 throw，每個 Promise 都會提供一個 then() 函數，和一個 catch()，實際上是 then(null, ...) 函數，
    somePromise().then(functoin(){
        // do something
    });


我們可以做三件事，
1. return 另一個 promise
2. return 一個同步的值 (或者 undefined)
3. throw 一個同步異常 throw new Eror('');
1. 封裝同步與異步代碼
```
new Promise(function (resolve, reject) {
resolve(someValue);
});
```
寫成

```
Promise.resolve(someValue);
```

2. 捕獲同步異常
 new Promise(function (resolve, reject) {
 throw new Error('悲劇了，又出 bug 了');
 }).catch(function(err){
 console.log(err);
 });

如果是同步代碼，可以寫成
    Promise.reject(new Error("什麼鬼"));


3. 多個異常捕獲，更加精準的捕獲
somePromise.then(function() {
 return a.b.c.d();
}).catch(TypeError, function(e) {
 //If a is defined, will end up here because
 //it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
 //Will end up here if a wasn't defined at all
}).catch(function(e) {
 //Generic catch-the rest, error wasn't TypeError nor
 //ReferenceError
});

4. 獲取兩個 Promise 的返回值
1. .then 方式順序調用
2. 設定更高層的作用域
3. spread

5. finally
任何情況下都會執行的，一般寫在 catch 之後

6. bind
somethingAsync().bind({})
.spread(function (aValue, bValue) {
 this.aValue = aValue;
 this.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
    return this.aValue + this.bValue + cValue;
});

或者 你也可以這樣
var scope = {};
somethingAsync()
.spread(function (aValue, bValue) {
 scope.aValue = aValue;
 scope.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
 return scope.aValue + scope.bValue + cValue;
});

然而，這有非常多的區別，
  1. 你必須先聲明，有浪費資源和內存泄露的風險
  2. 不能用於放在一個表達式的上下文中
  3. 效率更低
7. all。非常用於於處理一個動態大小均勻的 Promise 列表
8. join。非常適用於處理多個分離的 Promise
```
var join = Promise.join;
join(getPictures(), getComments(), getTweets(),
function(pictures, comments, tweets) {
console.log("in total: " + pictures.length + comments.length + tweets.length);
});
```

9. props。處理一個 promise 的 map 集合。只有有一個失敗，所有的執行都結束
```
Promise.props({
pictures: getPictures(),
comments: getComments(),
tweets: getTweets()
}).then(function(result) {
console.log(result.tweets, result.pictures, result.comments);
});
```

10. any 、some、race
```
Promise.some([
ping("ns1.example.com"),
ping("ns2.example.com"),
ping("ns3.example.com"),
ping("ns4.example.com")
], 2).spread(function(first, second) {
console.log(first, second);
}).catch(AggregateError, function(err) {

err.forEach(function(e) {
console.error(e.stack);
});
});;
```
有可能，失敗的 promise 比較多，導致，Promsie 永遠不會 fulfilled
11. .map(Function mapper [, Object options])
用於處理一個數組，或者 promise 數組，

Option: concurrency 並發現
    map(..., {concurrency: 1});

以下爲不限制併發數量，讀書文件信息
var Promise = require("bluebird");
var join = Promise.join;
var fs = Promise.promisifyAll(require("fs"));
var concurrency = parseFloat(process.argv[2] || "Infinity");

var fileNames = ["file1.json", "file2.json"];
Promise.map(fileNames, function(fileName) {
 return fs.readFileAsync(fileName)
 .then(JSON.parse)
 .catch(SyntaxError, function(e) {
 e.fileName = fileName;
 throw e;
 })
}, {concurrency: concurrency}).then(function(parsedJSONs) {
 console.log(parsedJSONs);
}).catch(SyntaxError, function(e) {
 console.log("Invalid JSON in file " + e.fileName + ": " + e.message);
});

結果
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js 1
reading files 35ms
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js Infinity
reading files: 9ms

11. .reduce(Function reducer [, dynamic initialValue]) -> Promise
Promise.reduce(["file1.txt", "file2.txt", "file3.txt"], function(total, fileName) {
 return fs.readFileAsync(fileName, "utf8").then(function(contents) {
 return total + parseInt(contents, 10);
 });
}, 0).then(function(total) {
 //Total is 30
});

12. Time
  1. .delay(int ms) -> Promise
  2. .timeout(int ms [, String message]) -> Promise
Promise 的實現
  1. q
  2. bluebird
  3. co
  4. when
ASYNC
async 函數與 Promise、Generator 函數一樣，是用來取代回調函數、解決異步操作的一種方法。它本質上是 Generator 函數的語法糖。async 函數並不屬於 ES6，而是被列入了 ES7。
參考文獻（說是抄也可以的）：
阮一峯的ES6 教程
關於promises，你理解了多少？
Bluebird 的官方文檔


作者：流星狂飆
鏈接：http://www.jianshu.com/p/063f7e490e9a
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。ise in js
回調函數真正的問題在於他剝奪了我們使用 return 和 throw 這些關鍵字的能力。而 Promise 很好地解決了這一切。
2015 年 6 月，ECMAScript 6 的正式版 終於發佈了。
ECMAScript 是 JavaScript 語言的國際標準，JavaScript 是 ECMAScript 的實現。ES6 的目標，是使得 JavaScript 語言可以用來編寫大型的複雜的應用程序，成爲企業級開發語言。
概念
ES6 原生提供了 Promise 對象。
所謂 Promise，就是一個對象，用來傳遞異步操作的消息。它代表了某個未來纔會知道結果的事件（通常是一個異步操作），並且這個事件提供統一的 API，可供進一步處理。
Promise 對象有以下兩個特點。
（1）對象的狀態不受外界影響。Promise 對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。
（2）一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變爲 Resolved 和從 Pending 變爲 Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。
有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操作更加容易。
Promise 也有一些缺點。首先，無法取消 Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
var promise = new Promise(function(resolve, reject) {
 if (/* 異步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

Promise 構造函數接受一個函數作爲參數，該函數的兩個參數分別是 resolve 方法和 reject 方法。
如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態，從「未完成」變爲「成功」（即從 pending 變爲 resolved）；
如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態，從「未完成」變爲「失敗」（即從 pending 變爲 rejected）。
基本的 api
  1. Promise.resolve()
  2. Promise.reject()
  3. Promise.prototype.then()
  4. Promise.prototype.catch()
  5. Promise.all() // 所有的完成
    var p = Promise.all([p1,p2,p3]);

  6. Promise.race() // 競速，完成一個即可
進階
promises 的奇妙在於給予我們以前的 return 與 throw，每個 Promise 都會提供一個 then() 函數，和一個 catch()，實際上是 then(null, ...) 函數，
    somePromise().then(functoin(){
        // do something
    });


我們可以做三件事，
1. return 另一個 promise
2. return 一個同步的值 (或者 undefined)
3. throw 一個同步異常 throw new Eror('');
1. 封裝同步與異步代碼
```
new Promise(function (resolve, reject) {
resolve(someValue);
});
```
寫成

```
Promise.resolve(someValue);
```

2. 捕獲同步異常
 new Promise(function (resolve, reject) {
 throw new Error('悲劇了，又出 bug 了');
 }).catch(function(err){
 console.log(err);
 });

如果是同步代碼，可以寫成
    Promise.reject(new Error("什麼鬼"));


3. 多個異常捕獲，更加精準的捕獲
somePromise.then(function() {
 return a.b.c.d();
}).catch(TypeError, function(e) {
 //If a is defined, will end up here because
 //it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
 //Will end up here if a wasn't defined at all
}).catch(function(e) {
 //Generic catch-the rest, error wasn't TypeError nor
 //ReferenceError
});

4. 獲取兩個 Promise 的返回值
1. .then 方式順序調用
2. 設定更高層的作用域
3. spread

5. finally
任何情況下都會執行的，一般寫在 catch 之後

6. bind
somethingAsync().bind({})
.spread(function (aValue, bValue) {
 this.aValue = aValue;
 this.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
    return this.aValue + this.bValue + cValue;
});

或者 你也可以這樣
var scope = {};
somethingAsync()
.spread(function (aValue, bValue) {
 scope.aValue = aValue;
 scope.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
 return scope.aValue + scope.bValue + cValue;
});

然而，這有非常多的區別，
  1. 你必須先聲明，有浪費資源和內存泄露的風險
  2. 不能用於放在一個表達式的上下文中
  3. 效率更低
7. all。非常用於於處理一個動態大小均勻的 Promise 列表
8. join。非常適用於處理多個分離的 Promise
```
var join = Promise.join;
join(getPictures(), getComments(), getTweets(),
function(pictures, comments, tweets) {
console.log("in total: " + pictures.length + comments.length + tweets.length);
});
```

9. props。處理一個 promise 的 map 集合。只有有一個失敗，所有的執行都結束
```
Promise.props({
pictures: getPictures(),
comments: getComments(),
tweets: getTweets()
}).then(function(result) {
console.log(result.tweets, result.pictures, result.comments);
});
```

10. any 、some、race
```
Promise.some([
ping("ns1.example.com"),
ping("ns2.example.com"),
ping("ns3.example.com"),
ping("ns4.example.com")
], 2).spread(function(first, second) {
console.log(first, second);
}).catch(AggregateError, function(err) {

err.forEach(function(e) {
console.error(e.stack);
});
});;
```
有可能，失敗的 promise 比較多，導致，Promsie 永遠不會 fulfilled
11. .map(Function mapper [, Object options])
用於處理一個數組，或者 promise 數組，

Option: concurrency 並發現
    map(..., {concurrency: 1});

以下爲不限制併發數量，讀書文件信息
var Promise = require("bluebird");
var join = Promise.join;
var fs = Promise.promisifyAll(require("fs"));
var concurrency = parseFloat(process.argv[2] || "Infinity");

var fileNames = ["file1.json", "file2.json"];
Promise.map(fileNames, function(fileName) {
 return fs.readFileAsync(fileName)
 .then(JSON.parse)
 .catch(SyntaxError, function(e) {
 e.fileName = fileName;
 throw e;
 })
}, {concurrency: concurrency}).then(function(parsedJSONs) {
 console.log(parsedJSONs);
}).catch(SyntaxError, function(e) {
 console.log("Invalid JSON in file " + e.fileName + ": " + e.message);
});

結果
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js 1
reading files 35ms
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js Infinity
reading files: 9ms

11. .reduce(Function reducer [, dynamic initialValue]) -> Promise
Promise.reduce(["file1.txt", "file2.txt", "file3.txt"], function(total, fileName) {
 return fs.readFileAsync(fileName, "utf8").then(function(contents) {
 return total + parseInt(contents, 10);
 });
}, 0).then(function(total) {
 //Total is 30
});

12. Time
  1. .delay(int ms) -> Promise
  2. .timeout(int ms [, String message]) -> Promise
Promise 的實現
  1. q
  2. bluebird
  3. co
  4. when
ASYNC
async 函數與 Promise、Generator 函數一樣，是用來取代回調函數、解決異步操作的一種方法。它本質上是 Generator 函數的語法糖。async 函數並不屬於 ES6，而是被列入了 ES7。
參考文獻（說是抄也可以的）：
阮一峯的ES6 教程
關於promises，你理解了多少？
Bluebird 的官方文檔


作者：流星狂飆
鏈接：http://www.jianshu.com/p/063f7e490e9a
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。











    





發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








Qt/C++音視頻開發71-指定mjpeg/h264格式採集本地攝像頭/存儲文件到mp4/設備推流/採集推流






一、前言
用ffmpeg採集本地攝像頭，如果不指定格式的話，默認小分辨率比如640x480使用rawvideo格式，大分辨率比如1280x720使用mjpeg格式，當然前提是這個攝像頭設備要支持這些格式。目前市面上有一些廠家做的本地設備支持






飛揚青雲

2024-04-25 14:40:54









git命令下，mac環境下載依賴相關報錯問題解決方案






1.安裝fundry框架curl -L https://foundry.paradigm.xyz | bash
2.寫入環境變量source /Users/xx/.bashrc
3.foundryup
問題1報錯：致命錯誤：無法訪問 'h






西紅柿愛喫馬鈴薯

2024-04-25 14:40:34









Python函數參數爲列表問題






def ADD(a):
print(3,a,hex(id(a)))
a.remove(2)
print(3,a,hex(id(a)))
a=a.append(10)






Danlis

2024-04-25 14:39:54









使用 NestJS 和 qrcode.js 創建 QR 碼生成器 API






前言
QR碼（Quick Response Code）是一種二維碼，於1994年開發。它能快速存儲和識別數據，包含黑白方塊圖案，常用於掃描獲取信息。QR碼具有高容錯性和快速讀取的優點，廣泛應用於廣告、支付、物流等領域。通過掃描QR碼，用戶可






葡萄城技術團隊

2024-04-25 14:39:44









ebpf在Android安全上的應用：ebpf的一些基礎知識(上篇)






ebpf在Android安全上的應用：ebpf的一些基礎知識(上篇)
一、ebpf介紹
eBPF 是一項革命性的技術，起源於 Linux 內核，它可以在特權上下文中（如操作系統內核）運行沙盒程序。它用於安全有效地擴展內核的功能，而無需通過更






windy_2

2024-04-25 14:36:53









CIRCLEQ_INSERT_AFTER, C語言循環隊列






 
CMakeLists.txt
# CMakeList.txt : CMake project for llist, include source and define
# project specific logic here.
#






mingzhanghui

2024-04-25 14:34:32









[MDP.BlazorCore] 快速建立跨Web、App執行的BlazorApp專案






團隊資源受限的時候，使用Blazor開發應用系統，只需開發一份程式碼及使用一種程式語言，就同時產出Web跟App應用系統。
本篇文章，紀錄使用MDP.BlazorCore所提供的樣板，快速建立跨Web、App執行的BlazorApp專案。為






Clark159

2024-04-25 14:32:42









Hessian矩陣以及在血管增強中的應用——OpenCV實現【2024年更新】






有別於廣爲人知的Sobel、Canny等一階算法，基於Hessian矩陣能夠得到圖像二階結果，這將幫助我們深入分析圖像本質。
Hessian矩陣在圖像處理中有着廣泛的應用：其中在圖像分割領域，包括邊緣檢測、紋理分析等；在圖像增強領域，包括邊






jsxyhelu

2024-04-25 14:32:02









七天.NET 8操作SQLite入門到實戰 - （2）第七天Blazor班級管理頁面編寫和接口對接






前言
上一章節我們引入BootstrapBlazor UI組件完成了EasySQLite後臺界面的基本架子的搭建，本章節的主要內容是Blazor班級管理頁面編寫和接口對接。
七天.NET 8 操作 SQLite 入門到實戰詳細教程
第一天






追逐時光

2024-04-25 14:30:41









WPF開源輕便、快速的桌面啓動器






前言
今天大姚給大家分享一款WPF開源、簡單、輕便、快速的桌面啓動器（支持多主題、多語言：簡體中文、繁體中文、英文等）：CurvaLauncher。
WPF介紹
WPF 是一個強大的桌面應用程序框架，用於構建具有豐富用戶界面的 Window






追逐時光

2024-04-25 14:30:41









MySQL 分庫分表方案，總結太全了。。






來源：https://www.cnblogs.com/405845829qq/p/7552736.html
前言
公司最近在搞服務分離，數據切分方面的東西，因爲單張包裹表的數據量實在是太大，並且還在以每天60W的量增長。 之前瞭解過數據庫的






Java技術棧

2024-04-25 14:30:11









公司來了個新同事，把 DDD 運用得爐火純青！






前言
我們生活中都聽說了DDD，也瞭解了DDD，那麼怎麼將一個新項目從頭開始按照DDD的過程進行劃分與架構設計呢？
一、專業術語
各種服務
IAAS：基礎設施服務，Infrastructure-as-a-service
PAAS：平臺服務






Java技術棧

2024-04-25 14:30:11









抖音的倒水問題, 計算機bfs求解






暴力求解 bfs方法.並且找到的一定是最少步驟
問題:
抖音上面又來了一個倒水遊戲
例子: 3個杯子, 容量12, 9, 5 上來12是滿的. 然後都沒有刻度只能倒到一個滿這種倒法, 然後最後希望倒出2個6ml的.
# 抖音上面又來了一個倒






張博的博客

2024-04-25 14:28:41









tar和zip包加密解密壓縮






 
 
1、概述
嗯，最近有些機密文件無處安放，因爲太機密了，後來確定加密後放到服務器上。研究一番後發現tar和zip命令都能實現，所以在此記錄一下。
壓縮：tar -zcvf - ./packageTest | openssl des3






馬昌偉

2024-04-25 14:22:40









解決mysql 事務死鎖的方法






使用以下命令查看引擎的狀態
SHOW ENGINE INNODB STATUS;
 
如果有事務死鎖可以看到如下圖的關鍵字
 
找到上圖的線程id 使用 kill 57763 .解決問題。
問題回放，事務死鎖如何產生？ 本地調試






雨V幕

2024-04-25 14:22:00