Promise用法

在項目中用到異步請求ajax，想到用promise來解決，之前用過但是已經很久了，還是忘了一些，重新熟悉了一下整理一份簡要文檔。

Promise，就是一個對象，用來傳遞異步操作的消息

Promise 對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。

如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態，從「未完成」變為「成功」（即從 pending 變為 resolved）；

如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態，從「未完成」變為「失敗」（即從 pending 變為 rejected）。

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

可以簡要看看promise的源碼

var Promise = function() {this.doneList = [];this.failList = [];this.state = 'pending'; };Promise.prototype = {//幾種常用方法constructor: 'Promise',resolve: function() {this.state = 'resolved';var list = this.doneList;for(var i = 0, len = list.length; i < len; i++) {list[0].call(this);list.shift();}},reject: function() {this.state = 'rejected';var list = this.failList;for(var i = 0, len = list.length; i < len; i++){list[0].call(this);list.shift();}},done: function(func) {if(typeof func === 'function') {this.doneList.push(func);}return this;},fail: function(func) {if(typeof func === 'function') {this.failList.push(func);}return this;},then: function(doneFn, failFn) {this.done(doneFn).fail(failFn);return this;},always: function(fn) {this.done(fn).fail(fn);return this;} };function when() {var p = new Promise();var success = true;var len = arguments.length;for(var i = 0; i < len; i++) {if(!(arguments[i] instanceof Promise)) {return false;}else {arguments[i].always(function() {if(this.state != 'resolved'){success = false;}len--;if(len == 0) {success ? p.resolve() : p.reject();}});}}return p;}

業務中的代碼實現方式如下：在兩次異步請求成功之后，再調用then的方法

return (dispatch, getState)=> {let getDataFunc = function(data) {return new Promise(function(resolve, reject){if(!data) {return resolve(null);}return requestJsonp({url: '',data: data,}, json=>{resolve(json);}, err=>{resolve(null);});});};return Promise.all([getDataFunc(data), getDataFunc(compareData)]).then((json)=>{if(!json[0] && !json[1]) {dispatch({type: DATA_ERR});} else {dispatch({type: REFRESH_GRAPH,data: json});}}); }; 現今流行的各大js庫，幾乎都不同程度的實現了Promise，如dojo，jQuery、Zepto等，它們暴露出來的大都是Deferred對象，以jQuery（Zepto類似）為例：方法更加簡潔方便 function getImg(url) { var def = $.Deferred(); var img = new Image(); img.onload = function() { def.resolve(this); }; img.onerror = function(err) { def.reject(err); }; img.src = url; return def.promise(); };

推薦一部書 promise迷你書，很薄的一本，?

http://liubin.org/promises-book/javascript-promise-book.pdf

轉載于:https://www.cnblogs.com/yinsu12311/p/5806713.html

總結

以上是生活随笔為你收集整理的Promise的用简要使用方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。