promise概述 · promise

# 概述 ES6 原生提供了 Promise 對象。并且現在有很多框架實現了Promise方案，比如Q框架、bulebird框架。所謂 Promise，就是一個對象，用來傳遞異步操作的消息。它代表了某個未來才會知道結果的事件（通常是一個異步操作），并且這個事件提供統一的 API，可供進一步處理。 Promise 對象有以下兩個特點。 * 對象的狀態不受外界影響。Promise 對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。 * 一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變為 Resolved 和從 Pending 變為 Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操作更加容易。 Promise 也有一些缺點。首先，無法取消 Promise，一旦新建它就會立即執行，無法中途取消。其次，如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處于 Pending 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。 Promise 構造函數接受一個函數作為參數，該函數的兩個參數分別是 resolve 方法和 reject 方法。如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態，從「未完成」變為「成功」（即從 pending 變為 resolved）；如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態，從「未完成」變為「失敗」（即從 pending 變為 rejected）。 # 目前流行的Promise框架 * Q框架 https://github.com/kriskowal/q * bluebird框架 https://github.com/petkaantonov/bluebird * co框架 https://github.com/tj/co * when框架 https://github.com/cujojs/when # Promise框架基本的 api ~~~ //以完成狀態 Promise.resolve() //以失敗狀態 Promise.reject() //執行完畢回調 Promise.prototype.then() //捕獲異常 Promise.prototype.catch() // 所有的完成 Promise.all() // 競速，完成一個即可 Promise.race() ~~~ # 使用Q框架異步應用的案例 ## 首選使用Q框架的原因在于以下幾點 * jQuery里面的異步使用的是Q框架 * Angular里面的異步使用的也是Q框架 * Express里面并沒有使用異步框架 * 因此綜上所述選用Q框架還是具備一定的優勢，現在講究全棧開發，最好在異步框架的選擇上達到前后數據端完全一致 # Q框架資源地址 * API: https://github.com/kriskowal/q/wiki/API-Reference * Q框架 https://github.com/kriskowal/q # Q框架安裝 ## NodeJS安裝 ~~~ npm install q -g ~~~ ## angular框架體系安裝 angular自帶$q服務，無需安裝 ## jquery安裝 jQuery中有deferred對象。無需安裝。deferred對象與q框架如出一轍。基本使用方法和原理一樣 # Q框架的案例 * 寫一個函數帶一個參數，返回函數結果為該參數累加1000，如果結果大于5000則返回錯誤，如果小于5000則返回累加結果。 ~~~ //引用q框架 var Q = require('q'); //全局數據 //函數首選promise化 function f1(args) { var defered = Q.defer(); setTimeout(function () { //計算 args += 1000; //如果結果大于5000那么給出錯誤的結果 if (args > 5000) { //錯誤的結果 defered.reject('錯誤'); } else { //正確的結果 defered.resolve(args); } }, 1000); return defered.promise; }; //執行f1，并且執行then方法，等待異步結果 f1(100).then(function (data) { console.log(data); },function (err) { console.log(err); }); ~~~ * 【使用q框架處理有一連串的異步方法，需要按順序執行】一個變量經歷4個工序，分別每個工序需要若干時間，假設第一個工序需要1秒，第二個工序需要2秒，第三個工序需要4秒，第四個工序需要1秒 ~~~ var Q = require('q'); //f1(data)的參數data為初始值 function f1(data) { var defered = Q.defer(); setTimeout(function () { data += 'f1'; console.log('f1結束'); defered.resolve(data); }, 1000); return defered.promise; }; //f2(data)的參數data會銜接上f1的data的結果 function f2(data) { var defered = Q.defer(); setTimeout(function () { data += 'f2'; console.log('f2結束'); defered.resolve(data); }, 2000); return defered.promise; }; function f3(data) { var defered = Q.defer(); setTimeout(function () { data += 'f3'; console.log('f3結束'); defered.resolve(data); }, 4000); return defered.promise; }; function f4(data) { var defered = Q.defer(); setTimeout(function () { data += 'f4'; console.log('f4結束'); defered.resolve(data); }, 1000); return defered.promise; }; f1('hzj').then(f2).then(f3).then(f4).done(function (data) { console.log(data); }); ~~~ * 動態多異步任務順序執行 ~~~ var Q = require('q'); function f2(temp) { var defered = Q.defer(); setTimeout(function () { temp.data += 'f2'; console.log(temp.js + ':f2結束'); temp.js += 1; defered.resolve(temp); }, 2000); return defered.promise; }; //動態自定義函數異步隊列 function task() { //需要執行的函數數組,需要注意的是這里是函數對象，并不是執行函數,且函數對象需要返回的是promise var funcs = [f2, f2, f2, f2]; //設置初始值 var temp = { //計數器 js: 0, //真正的數據 data: 'hzj' }; //實例化Q,并且給出初始值 var result = Q(temp); //開始異步順序執行函數數組里面的函數 //形成xx.then().then().then()形式 funcs.forEach(function (f) { result = result.then(f); }); //返回最后一個異步任務 return result; } //開始執行 //done方法為全部結束后，執行結果 task().done(function (data) { console.log(data.data); }); ~~~ * Express中處理MySQL數據庫的異步案例 ~~~ //引入異步模塊q var q = require('q'); //引入express模塊 var express = require('express'); //引入mysql模塊 var mysql = require('mysql'); //數據庫連接信息 var mysqlObj = { host: 'localhost', user: 'root', port: 3306, password: '123456', database: 'question' }; //express的app對象 var app = express(); //主表【1】 function f1() { var defer = q.defer(); var connection = mysql.createConnection(mysqlObj); connection.connect(); connection.query('select * from topic where topicType_id in(1,2)', function (err, rows, fields) { if (err) { defer.reject(err); } else { defer.resolve(rows); } }); connection.end; return defer.promise; } //副表【n】【主副表關系為1:n】 function f2(data, id) { var defer = q.defer(); var connection = mysql.createConnection(mysqlObj); connection.connect(); connection.query('select * from item where topic_id=?;', [id], function (err, rows, fields) { if (err) { defer.reject(err); } else { data.item = rows; defer.resolve(data); } }); connection.end(); return defer.promise; } //啟動路由 app.get('/topic/item', function (req, res) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", ' 3.2.1'); res.header("Content-Type", "application/json;charset=utf-8"); var qQuerer = []; var tempData = []; f1().then(function (data) { for (var i = 0; i < data.length; i++) { qQuerer.push(f2(data[i], data[i].id)); } //q.all的展開方案spread方法 //spread方法內置一個arguments數組 q.all(qQuerer).spread(function () { for (var i = 0; i < data.length; i++) { tempData.push(arguments[i]); } res.send(tempData); }); }); }); //開服 app.listen(8888, function () { console.log('OK'); }); ~~~ * Angular服務中使用HTTP協議的異步案例 ~~~ //Angular的自定義服務 //$http為Angular的http服務 //$q為Angular的異步服務 angular.module('myapp').service('topicServer', function ($http, $q) { //開啟異步對象 var defer = $q.defer(); $http.get('http://localhost:8888/topic/item').success(function (data, status, headers, congfig) { //成功的時候使用resolve方法添加參數 defer.resolve(data); }).error(function (data, status, headers, congfig) { //失敗的時候使用reject方法添加參數 defer.reject(data); }); //返回異步對象【服務里面沒有辦法處理異步只能返回異步對象由控制器負責處理】 this.data = defer.promise; }); angular.module('myapp').controller('indexCtrl',function ($scope,topicServer) { //Angular控制器中調度服務的異步執行結果 topicServer.data.then(function (data) { $scope.topic=data; }); $scope.ASC=function (number) { return String.fromCharCode(number+65); }; }); ~~~ * html模板顯示 ~~~ <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="assets/css/mystyle.css">  <script src="../bower_components/jquery/dist/jquery.min.js"></script>  <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>  <script src="../bower_components/angular/angular.min.js"></script>  <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>  <script src="app.js"></script>  <script src="router/uiRouter.js"></script> <script src="run/run.js"></script> <script src="server/basePath.js"></script>  <script src="controller/indexCtrl.js"></script> <script src="server/subjectServer.js"></script> <script src="server/topictypeServer.js"></script> <script src="server/topicServer.js"></script> </head> <body> <div ng-controller="indexCtrl"> <ul> <li ng-repeat="item in topic"> {{ $index+1+':'+item.name}} <ul> <li ng-repeat="item2 in item.item"> {{ ASC($index)+':'+item2.name}} </li> </ul> </li> </ul> </div> </body> </html> ~~~