1. Promise的狀態 Promise對象有三個狀態： 1. 進行中(pending) 2. 成功(resolved) 3. 失敗(rejected) 2. 生成一個Promise對象 1. 構造函數 new Promise(function(resolve,reject){}); resolve和reject函數是瀏覽器內部實現的，直接調用即可。 2. Promise.resolve Promise.resolve()直接返回一個resolve狀態的Promise對象 Promise.resolve可以用來生成一個then鏈 3. Promise.reject Promise.reject()直接返回一個reject狀態的Promise對象 3. Promise的then的用法
Promise的then永遠返回一個新的Promise，Promise的catch是then(null,rejection)的語法糖，catch中也會返回一個新的Promise。 建議在Promise的then永遠return或throw，不要只是執行一個函數。
例如： var aPromise = new Promise(function (resolve) {resolve(100); }); var thenPromise = aPromise.then(function (value) {console.log(value); }); var catchPromise = thenPromise.catch(function (error) {console.error(error); }); console.log(aPromise !== thenPromise); // => true console.log(thenPromise !== catchPromise);// => true === 是嚴格相等比較運算符，我們可以看出這三個對象都是互不相同的，這也就證明了 then 和 catch 都返回了和調用者不同的promise對象。
1. Promise的then內部可以做三種事情： (1). return 另一個promise (2). return 一個同步值(或者undefined) 因為javascript函數無返回值時候，默認返回undefined，所以只是執行一個函數，不return，默認就是返回undefined。 返回一個同步值在Promise中會將同步代碼包裹為promise，得到的還是一個promsie。返回一個同步值是有用處的，例如， 一個異步值在內存中做了緩存，可以直接從內存中拿到該值，直接返回，不必再調用異步接口。 getUserByName('xxx').then(function(user){if(imMemoryCache[user.id]){return inMemoryCache[user.id];}return getUserAccountById(user.id); }).then(function(userAccount){}); (3). throw 一個同步異常 2. Promise的一些寫法 new Promise(function(resolve,reject){resolve(syncValue); }).then(/*...*/)//可以寫成 Promise.resolve(syncValue).then(/*...*/)//一個錯誤也可以寫成 Promise.reject(new Error('...')) 這樣無論成功或失敗都可以后面的then和catch中捕獲和繼續操作 3. Promise的then中只能傳遞函數，如果為其他類型，例如另一Promise，會被解釋為null，此時Promsie的值傳遞會穿透 例如： Promise.resolve('foo').then(Promise.resolve('bar')).then(function(result){console.log(result); }); //會被解釋為： Promise.resolve('foo').then(null).then(function(result){console.log(result); }); 第一個resolve的值會穿透到then，打印出foo。 4. then的四種寫法的區別 // 寫法一 f1().then(function () {return f2(); });// 寫法二 f1().then(function () {f2(); });// 寫法三 f1().then(f2());// 寫法四 f1().then(f2); 1. 寫法1和4完全等價，f1值能傳遞到f2,f2的返回值也能繼續向后面的then傳遞 2. 寫法2相當于默認return undefined，無法向后面的then傳遞值 3. 寫法3能夠向后面傳遞f2的值，沒有更深刻的解釋(有懂的朋友請評論告知)
4. Promise的調用方法
每個then返回一個新的promise調用，這種寫法被稱為composing promises。 promise1.then(function(){return promise2; }).then(function(){return promise3; }).then(function(){return promise4; }).catch(function(err){console.log(err); }); 5. Promise的并行執行
由于promise一旦被創建，就會立即執行，所以拿到一個Promise數組時候，其中的promise必然全部開始執行了。 因此要讓一系列promise順序執行，只能將promise放在一個函數中，在要執行的時候才去創建他，就是一個工廠 函數，promiseFactory。promise并行執行的代碼應該如下： function executeSequentially(promiseFactories){var res = Promsie.resolve();promiseFactories.forEach(function(promiseFactory){res = res.then(promiseFactory);});return res; } //工廠函數只是簡單的創建一個promise function promiseFactory(){return createAPromise(); } 6. Promise捕獲錯誤 7. 實現一個Promise版本的ajax //原生版本 function Http(){}Http.prototype = {get:function(opts){return this.ajax(opts);},post:function(){return this.ajax(opts);},ajax:function(opts){return Promise(function(resolve,reject){var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('...');var {url,method,data,async,success,fail} = options;var sendBody = null;var qs = Object.keys(data).reduce(function(cur,pre,index){return pre + '&' + encodeURIComponent(cur) + '=' + encodeURIComponent(data[cur]);},'').slice(1);if(medthod == 'get'){url += '?' + qs;}else if(medhot == 'post'){xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');sendBody = qs || null;}xhr.onreadystatechange = function(){if(xhr.readystate == 4){if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){resolve(xhr,xhr.responseText);}}else{reject(xhr,xhr.responseText);}}xhr.open(method,url,async);xhr.send(sendBody);});} }//jquery版本 function Http(){}Http.prototype = {get:function(opts){return this.ajax(opts);},post:function(opts){return this.ajax(opts);},ajax:function(){return $.ajax(opts);} }

?

?

參考：https://juejin.im/entry/596f2ab2f265da6c25190f41 http://javascript.ruanyifeng.com/advanced/promise.html#toc2 https://www.kancloud.cn/kancloud/promises-book/44256

?

轉載于:https://www.cnblogs.com/mengff/p/9646392.html

總結

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

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