一、背景

大家都知道nodejs很快，為什么會這么快呢，原因就是node采用異步回調的方式來處理需要等待的事件，使得代碼會繼續往下執行不用在某個地方等待著。但是也有一個不好的地方，當我們有很多回調的時候，比如這個回調執行完需要去執行下個回調，然后接著再執行下個回調，這樣就會造成層層嵌套，代碼不清晰，很容易進入“回調監獄”，就容易造成下邊的例子：

async(1, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, function(value){
 async(value, final);
 });
 });
 });
 });
});

這樣的寫法會讓人崩潰，那么有什么辦法可以解決這個問題呢，或者有其他別的寫法嗎？答案是有的，es6新出的promise對象已經es7的async await都可以解決這個問題，當然這里先介紹promise對象，es7的async await將在后邊的文章中分享。下邊將來介紹Promise對象。

二、簡介

Promise，他是一個對象，是用來處理異步操作的，可以讓我們寫異步調用的時候寫起來更加優雅，更加美觀便于閱讀。顧名思義為承諾、許諾的意思，意思是使用了Promise之后他肯定會給我們答復，無論成功或者失敗都會給我們一個答復，所以我們就不用擔心他跑了哈哈。所以，Promise有三種狀態：pending（進行中），resolved（完成），rejected（失敗）。只有異步返回的結構可以改變其狀態。所以，promise的過程一般只有兩種：pending->resolved或者pending->rejected。

promise對象還有一個比較常用的then方法，用來執行回調函數，then方法接受兩個參數，第一個是成功的resolved的回調，另一個是失敗rejected的回調，第二個失敗的回調參數可選。并且then方法里也可以返回promise對象，這樣就可以鏈式調用了。接下來上代碼:

var Pro = function (time) {
 //返回一個Promise對象
 return new Promise(function (resolve, reject) {
 console.log('123');
 //模擬接口調用
 setTimeout(function () {
 //這里告訴Promise 成功了，然后去執行then方法的第一個函數
 resolve('成功返回');
 }, time);
 })
 };
 (function(){
 console.log('start');
 Pro(3000)
 .then(function(data){
 console.log(data);
 return Pro(5000);})
 .then(function(data){
 console.log(data);
 console.log('end');
 })
 })();

上邊代碼中，定義了一個Pro變量，然后把一個匿名函數賦給他，函數返回一個Promise對象，然后對象里邊接收一個函數，分別把resolve跟reject方法當參數傳進去，用setTimeOut來模擬異步請求，當執行resolve方法后就會調用then方法的一個函數。結果如下：

三、Promise 的api　

1、Promise.resolve()
2、Promise.reject()
3、Promise.prototype.then()
4、Promise.prototype.catch()
5、Promise.all() // 所有的都有完成，相當于 且
6、Promise.race() // 完成一個即可，相當于 或

1、Promise.resolve()的作用將現有對象轉為Promise對象resolvedl;Promise.resolve('test')==new Promise(resolve=>resolve('test'))

2、Promise.reject()也是返回一個Promise對象,狀態為rejected；

3、then方法上邊已經做介紹，這里就不再介紹。

4、catch():發生錯誤的回調函數。

5、Promise.all()適合用于所有的結果都完成了才去執行then（）成功的操作。舉個例子：

let p1 =new Promise(function(resolve,reject){
 resolve(1);
 });
 let p2 = new Promise(function(resolve,reject){
 resolve(2);
 });
 let p3 = new Promise(function(resolve,reject){
 resolve(3);
 });
 Promise.all([p1, p2, p3]).then(function (results) {
 console.log('success:'+results);
 }).catch(function(r){
 console.log("error");
 console.log(r);
 });

最后輸出：

6、Promise.race()的作用也是同時執行多個實例，只要有一個實例改變狀態，Promise就改為那個實例所改變的狀態；

四、例子

var Pro = function () {
 //返回一個Promise對象
 return new Promise(function (resolve, reject) {
 //模擬接口調用
 setTimeout(function () {
 resolve(true);
 }, 1000);
 })
 };
 var Pro2 = function () {
 //返回一個Promise對象
 return new Promise(function (resolve, reject) {
 //模擬接口調用
 setTimeout(function () {
 resolve('Pro2成功執行');
 }, 1000);
 })
 };
 
 Pro().then(function(data){
 var val = data;
 console.log(val)
 if (val) {
 console.log(1111)
 return Pro2()
 }
 
 }).then(function(data1){
 console.log(data1)
 })

輸出：

這樣就可以用then方法可以實現鏈式調用了。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

JavaScript調停者模式（詳細教程）

在jQuery中有關Dom元素使用方法？

在Vue中如何實現事件響應式進度條組件

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com