手把手教你Node使用Promise替代回調函數原薦

async 的本質是一個流程控制。其實在異步編程中，還有一個更爲經典的模型，叫做 Promise/Deferred 模型（當然還有更多相關解決方法，比如 eventproxy，co 等，到時候遇到在挖坑）

首先，我們思考一個典型的異步編程模型，考慮這樣一個題目：讀取一個文件，在控制檯輸出這個文件內容

var fs = require('fs');
fs.readFile('1.txt', 'utf8', function (err, data) {
  console.log(data);
});

看起來很簡單，再進一步: 讀取兩個文件，在控制檯輸出這兩個文件內容

var fs = require('fs');
fs.readFile('1.txt', 'utf8', function (err, data) {
  console.log(data);
  fs.readFile('2.txt', 'utf8', function (err, data) {
    console.log(data);
  });
});//歡迎加入全棧開發交流圈一起學習交流：864305860

要是讀取更多的文件呢

var fs = require('fs');
fs.readFile('1.txt', 'utf8', function (err, data) {
  fs.readFile('2.txt', 'utf8', function (err, data) {
    fs.readFile('3.txt', 'utf8', function (err, data) {
      fs.readFile('4.txt', 'utf8', function (err, data) {
        // ...
      });
    });//歡迎加入全棧開發交流圈一起學習交流：864305860
  });
});

這就是傳說中的 callback hell，可以使用 async 來改善這段代碼，但是在本例中我們要用 promise/defer 來改善它 promise 基本概念 首先它是一個對象，它和 javascript 普通的對象沒什麼區別，同時，它也是一種規範，跟異步操作約定了統一的接口，表示一個異步操作的最終結果，以同步的方式來寫代碼，執行的操作是異步的，但又保證程序執行的順序是同步的

1. promise 只有三種狀態，未完成，完成 (fulfilled) 和失敗 (rejected)
1. promise 的狀態可以由未完成轉換成完成，或者未完成轉換成失敗
1. promise 的狀態轉換隻發生一次

promise 有一個 then 方法，then 方法可以接受 3 個函數作爲參數。前兩個函數對應 promise 的兩種狀態 fulfilled, rejected 的回調函數。第三個函數用於處理進度信息爲了理解它，一些重要原理必須記牢：.then() 總是返回一個新的 promise，如下面代碼：

var promise = readFile()
var promise2 = promise.then(readAnotherFile, console.error)

這裏 then 的參數 readAnotherFile, console.error 是代表異步操作成功後的動作 onFulfilled 或失敗後的動作 OnRejected，也就是說，讀取文件成功後執行 readAnotherFile 函數，否則失敗打印記錄錯誤。這種實現是兩個中只有一種可能也可以理解爲：

promiseSomething().then(function (fulfilled) {
  // 當 promise 狀態變成 fulfilled 時，調用此函數
}, function (rejected) {
  // 當 promise 狀態變成 rejected 時，調用此函數
}, function (progress) {
  // 當返回進度信息時，調用此函數
});//歡迎加入全棧開發交流圈一起學習交流：864305860

Promise 法則有兩部分必須分離：

1. then() 總是返回一個新的 promise，每次你調用它，它不管回調做什麼，因爲 .then() 在回調被調用之前已經給了你一個承諾 promise，回調的行爲隻影響承諾 promise 的實施，如果回調返回一個值，那麼 promise 將使用那個值，如果這個值是一個 promise，返回這個 promise 實施後的值給這個值，如果回調拋出錯誤，promise 將拒絕錯誤
1. 被 .then() 返回的 promise 是一個新的 promise ，它不同於那些 .then() 被調用的 promise，promise 長長的鏈條有時會好些隱藏這個事實，不管如何，每次 .then() 調用都會產生一個新的 promise，這裏必須注意的是你真正需要考慮的是你最後調用 .then() 可能代表失敗，那麼如果你不捕獲這種失敗，那麼容易導致你的錯誤 exception 消失

來看一個利用 q 來處理這種問題的簡單例子：

var Q = require('q');
var defer = Q.defer();
/**
 * 獲取初始 promise
 * @private
 */
function getInitialPromise() {
  return defer.promise;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
  
/**
 * 爲 promise 設置三種狀態的回調函數
 */
getInitialPromise().then(function (success) {
  console.log(success);
}, function (error) {
  console.log(error);
}, function (progress) {
  console.log(progress);
});
defer.notify('in progress'); // 控制檯打印 in progress
defer.resolve('resolve');   // 控制檯打印 resolve
defer.reject('reject');    // 沒有輸出。promise 的狀態只能改變一次

promise 的傳遞 then 方法會返回一個 promise，在下面這個例子中，我們用 outputPromise 指向 then 返回的 promise。

var outputPromise = getInputPromise().then(function (fulfilled) {
  
  }, function (rejected) {
  
  });

現在 outputPromise 就變成了受 function(fulfilled) 或者 function(rejected) 控制狀態的 promise 了。直白的意思就是：當 function(fulfilled) 或者 function(rejected) 返回一個值，比如一個字符串，數組，對象等等，那麼 outputPromise 的狀態就會變成 fulfilled。在下面這個例子中，我們可以看到，當我們把 inputPromise 的狀態通過 defer.resovle() 變成 fulfilled 時，控制檯輸出 fulfilled. 當我們把 inputPromise 的狀態通過 defer.reject() 變成 rejected，控制檯輸出 rejected

var Q = require('q');
var defer = Q.defer();
/**//歡迎加入全棧開發交流圈一起學習交流：864305860
 * 通過 defer 獲得 promise
 * @private
 */
function getInputPromise() {
  return defer.promise;
}  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)
 * 當 inputPromise 狀態由未完成變成 rejected 時，調用 function(rejected)
 * 將 then 返回的 promise 賦給 outputPromise
 * function(fulfilled) 和 function(rejected) 通過返回字符串將 outputPromise 的狀態由
 * 未完成改變爲 fulfilled
 * @private
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
var outputPromise = getInputPromise().then(function (fulfilled) {
  return 'fulfilled';
}, function (rejected) {
  return 'rejected';
});  
/**
 * 當 outputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)，控制檯打印 'fulfilled: fulfilled'。
 * 當 outputPromise 狀態由未完成變成 rejected, 調用 function(rejected), 控制檯打印 'rejected: rejected'。
 */
outputPromise.then(function (fulfilled) {
  console.log('fulfilled: ' + fulfilled);
}, function (rejected) {
  console.log('rejected: ' + rejected);
});
  /**//歡迎加入全棧開發交流圈一起學習交流：864305860
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
defer.reject(); // 輸出 fulfilled: rejected  
/**
 * 將 inputPromise 的狀態由未完成變成 fulfilled
 */
//defer.resolve(); // 輸出 fulfilled: fulfilled

當 function(fulfilled) 或者 function(rejected) 拋出異常時，那麼 outputPromise 的狀態就會變成 rejected

var Q = require('q');
var fs = require('fs');
var defer = Q.defer();
  
/**
 * 通過 defer 獲得 promise
 * @private
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
function getInputPromise() {
  return defer.promise;
}
  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)
 * 當 inputPromise 狀態由未完成變成 rejected 時，調用 function(rejected)
 * 將 then 返回的 promise 賦給 outputPromise
 * function(fulfilled) 和 function(rejected) 通過拋出異常將 outputPromise 的狀態由
 * 未完成改變爲 reject
 * @private
 */
var outputPromise = getInputPromise().then(function (fulfilled) {
  throw new Error('fulfilled');
}, function (rejected) {
  throw new Error('rejected');
});  
/**
 * 當 outputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)。
 * 當 outputPromise 狀態由未完成變成 rejected, 調用 function(rejected)。
 */
outputPromise.then(function (fulfilled) {
  console.log('fulfilled: ' + fulfilled);
}, function (rejected) {
  console.log('rejected: ' + rejected);
});  
/**
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
defer.reject();   // 控制檯打印 rejected [Error:rejected]
  //歡迎加入全棧開發交流圈一起學習交流：864305860
/**
 * 將 inputPromise 的狀態由未完成變成 fulfilled
 */
//defer.resolve(); // 控制檯打印 rejected [Error:fulfilled]

當 function(fulfilled) 或者 function(rejected) 返回一個 promise 時，outputPromise 就會成爲這個新的 promise. 這樣做的意義在於聚合結果 (Q.all)，管理延時，異常恢復等等比如說我們想要讀取一個文件的內容，然後把這些內容打印出來。可能會寫出這樣的代碼：

// 錯誤的寫法
var outputPromise = getInputPromise().then(function (fulfilled) {
  fs.readFile('test.txt', 'utf8', function (err, data) {
    return data;
  });//歡迎加入全棧開發交流圈一起學習交流：864305860
});

然而這樣寫是錯誤的，因爲 function(fulfilled) 並沒有返回任何值。需要下面的方式:

var Q = require('q');
var fs = require('fs');
var defer = Q.defer();
  
/**
 * 通過 defer 獲得promise
 * @private
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
function getInputPromise() {
  return defer.promise;
}
  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil時，調用 function(fulfilled)
 * 當 inputPromise 狀態由未完成變成 rejected時，調用 function(rejected)
 * 將 then 返回的 promise 賦給 outputPromise
 * function(fulfilled) 將新的 promise 賦給 outputPromise
 * 未完成改變爲 reject
 * @private
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
var outputPromise = getInputPromise().then(function (fulfilled) {
  var myDefer = Q.defer();
  fs.readFile('test.txt', 'utf8', function (err, data) {
    if (!err && data) {
      myDefer.resolve(data);
    }
  });//歡迎加入全棧開發交流圈一起學習交流：864305860
  return myDefer.promise;
}, function (rejected) {
  throw new Error('rejected');
});
  
/**
 * 當 outputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)，控制檯打印 test.txt 文件內容。
 *
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
outputPromise.then(function (fulfilled) {
  console.log(fulfilled);
}, function (rejected) {
  console.log(rejected);
});  
/**
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
//defer.reject();  
/**
 * 將 inputPromise 的狀態由未完成變成 fulfilled
 */
defer.resolve(); // 控制檯打印出 test.txt 的內容

方法傳遞 方法傳遞有些類似於 Java 中的 try 和 catch。當一個異常沒有響應的捕獲時，這個異常會接着往下傳遞方法傳遞的含義是當一個狀態沒有響應的回調函數，就會沿着 then 往下找 沒有提供 function(rejected)

var outputPromise = getInputPromise().then(function (fulfilled) { })

如果 inputPromise 的狀態由未完成變成 rejected, 此時對 rejected 的處理會由 outputPromise 來完成

var Q = require('q');
var fs = require('fs');
var defer = Q.defer();
/**
 * 通過defer獲得promise
 * @private
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
function getInputPromise() {
  return defer.promise;
}
  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil 時，調用 function(fulfilled)
 * 當 inputPromise 狀態由未完成變成 rejected 時，這個 rejected 會傳向 outputPromise
 */
var outputPromise = getInputPromise().then(function (fulfilled) {
  return 'fulfilled'
});//歡迎加入全棧開發交流圈一起學習交流：864305860
outputPromise.then(function (fulfilled) {
  console.log('fulfilled: ' + fulfilled);
}, function (rejected) {
  console.log('rejected: ' + rejected);
});
  /**
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
defer.reject('inputpromise rejected'); // 控制檯打印 rejected: inputpromise rejected
/**
 * 將 inputPromise的狀態由未完成變成fulfilled
 *///歡迎加入全棧開發交流圈一起學習交流：864305860
//defer.resolve();

沒有提供 function(fulfilled)

var outputPromise = getInputPromise().then(null, function (rejected) { })

如果 inputPromise 的狀態由未完成變成 fulfilled, 此時對 fulfil 的處理會由 outputPromise 來完成

var Q = require('q');
var fs = require('fs');
var defer = Q.defer();
  
/**
 * 通過defer獲得promise
 * @private
 */
function getInputPromise() {
  return defer.promise;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil時，傳遞給 outputPromise
 * 當 inputPromise 狀態由未完成變成 rejected時，調用 function(rejected)
 * function(fulfilled) 將新的 promise 賦給 outputPromise
 * 未完成改變爲 reject
 * @private
 */
var outputPromise = getInputPromise().then(null, function (rejected) {
  return 'rejected';
});  //歡迎加入全棧開發交流圈一起學習交流：864305860
outputPromise.then(function (fulfilled) {
  console.log('fulfilled: ' + fulfilled);
}, function (rejected) {
  console.log('rejected: ' + rejected);
});  
/**
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
// defer.reject('inputpromise rejected');  
/**
 * 將 inputPromise 的狀態由未完成變成fulfilled
 */
defer.resolve('inputpromise fulfilled'); // 控制檯打印fulfilled: inputpromise fulfilled

可以使用 fail(function(error)) 來專門針對錯誤處理，而不是使用 then(null,function(error))

var outputPromise = getInputPromise().fail(function (error) { })

看這個例子：

var Q = require('q');
var fs = require('fs');
var defer = Q.defer();
/**//歡迎加入全棧開發交流圈一起學習交流：864305860
 * 通過defer獲得promise
 * @private
 */
function getInputPromise() {
  return defer.promise;
}
  
/**
 * 當 inputPromise 狀態由未完成變成 fulfil 時，調用 then(function(fulfilled))
 * 當 inputPromise 狀態由未完成變成 rejected 時，調用 fail(function(error))
 * function(fulfilled) 將新的 promise 賦給 outputPromise
 * 未完成改變爲reject
 * @private
 */
var outputPromise = getInputPromise().then(function (fulfilled) {
  return fulfilled;
}).fail(function (error) {
  console.log('fail: ' + error);
});//歡迎加入全棧開發交流圈一起學習交流：864305860
/**
 * 將 inputPromise 的狀態由未完成變成 rejected
 */
defer.reject('inputpromise rejected');// 控制檯打印 fail: inputpromise rejected
  
/**
 * 將 inputPromise 的狀態由未完成變成 fulfilled
 */
//defer.resolve('inputpromise fulfilled');

可以使用 progress(function (progress)) 來專門針對進度信息進行處理，而不是使用 then(function (success) { }, function (error) { }, function (progress) { })

var Q = require('q');
var defer = Q.defer();
/**
 * 獲取初始 promise
 * @private
 */
function getInitialPromise() {
  return defer.promise;
}
/**//歡迎加入全棧開發交流圈一起學習交流：864305860
 * 爲 promise 設置 progress 信息處理函數
 */
var outputPromise = getInitialPromise().then(function (success) {
  
}).progress(function (progress) {
  console.log(progress);
});
  
defer.notify(1);
defer.notify(2); // 控制檯打印 1，2

promise 鏈 promise 鏈提供了一種讓函數順序執行的方法函數順序執行是很重要的一個功能。比如知道用戶名，需要根據用戶名從數據庫中找到相應的用戶，然後將用戶信息傳給下一個函數進行處理

var Q = require('q');
var defer = Q.defer();
// 一個模擬數據庫
var users = [{ 'name': 'andrew', 'passwd': 'password' }];
function getUsername() {
  return defer.promise;
}
  function getUser(username) {
  var user;
  users.forEach(function (element) {
    if (element.name === username) {
      user = element;
    }
  });//歡迎加入全棧開發交流圈一起學習交流：864305860
  return user;
}  
// promise 鏈
getUsername().then(function (username) {
  return getUser(username);
}).then(function (user) {
  console.log(user);
});  
defer.resolve('andrew');

我們通過兩個 then 達到讓函數順序執行的目的。 then 的數量其實是沒有限制的。當然，then 的數量過多，要手動把他們鏈接起來是很麻煩的。比如

foo(initialVal).then(bar).then(baz).then(qux)

這時我們需要用代碼來動態製造 promise 鏈

var funcs = [foo, bar, baz, qux]
var result = Q(initialVal) 
funcs.forEach(function (func) {
  result = result.then(func)
})
return result

當然，我們可以再簡潔一點

var funcs = [foo, bar, baz, qux]
funcs.reduce(function (pre, current),Q(initialVal){
  return pre.then(current)
})//歡迎加入全棧開發交流圈一起學習交流：864305860

看一個具體的例子

function foo(result) {
  console.log(result);
  return result + result;
}
  
// 手動鏈接
Q('hello').then(foo).then(foo).then(foo);
  
// 控制檯輸出： hello
// hellohello
// hellohellohello
  
// 動態鏈接
var funcs = [foo, foo, foo];
var result = Q('hello');
  
funcs.forEach(function (func) {
  result = result.then(func);
});
  //歡迎加入全棧開發交流圈一起學習交流：864305860
// 精簡後的動態鏈接
funcs.reduce(function (prev, current) {
  return prev.then(current);
}, Q('hello'));

對於 promise 鏈，最重要的是需要理解爲什麼這個鏈能夠順序執行。如果能夠理解這點，那麼以後自己寫 promise 鏈可以說是輕車熟路啊 promise 組合 回到我們一開始讀取文件內容的例子。如果現在讓我們把它改寫成 promise 鏈，是不是很簡單呢？

var Q = require('q'),
  fs = require('fs');  
function printFileContent(fileName) {
  return function () {
    var defer = Q.defer();
    fs.readFile(fileName, 'utf8', function (err, data) {
      if (!err && data) {
        console.log(data);
        defer.resolve();
      }
    })
    return defer.promise;
  }
} //歡迎加入全棧開發交流圈一起學習交流：864305860
// 手動鏈接
printFileContent('sample01.txt')()
  .then(printFileContent('sample02.txt'))
  .then(printFileContent('sample03.txt'))
  .then(printFileContent('sample04.txt'));  // 控制檯順序打印 sample01 到 sample04 的內容

我們會發現爲什麼要他們順序執行呢，如果他們能夠並行執行不是更好嗎? 我們只需要在他們都執行完成之後，得到他們的執行結果就可以了我們可以通過 Q.all([promise1,promise2...]) 將多個 promise 組合成一個 promise 返回。注意：

1. 當 all 裏面所有的 promise 都 fulfil 時，Q.all 返回的 promise 狀態變成 fulfil
1. 當任意一個 promise 被 reject 時，Q.all 返回的 promise 狀態立即變成 reject

我們來把上面讀取文件內容的例子改成並行執行吧

var Q = require('q');
var fs = require('fs');
/**//歡迎加入全棧開發交流圈一起學習交流：864305860
 *讀取文件內容
 *@private
 */
function printFileContent(fileName) {
  // Todo: 這段代碼不夠簡潔。可以使用 Q.denodeify 來簡化
  var defer = Q.defer();  
  fs.readFile(fileName, 'utf8', function (err, data) {
    if (!err && data) {
      console.log(data);
      defer.resolve(fileName + ' success ');
    } else {
      defer.reject(fileName + ' fail ');
    }
  })  //歡迎加入全棧開發交流圈一起學習交流：864305860
  return defer.promise;  
}  
Q.all([printFileContent('sample01.txt'), printFileContent('sample02.txt'), printFileContent('sample03.txt'), printFileContent('sample04.txt')])
  .then(function (success) {
    console.log(success);
  }); // 控制檯打印各個文件內容 順序不一定

現在知道 Q.all 會在任意一個 promise 進入 reject 狀態後立即進入 reject 狀態。如果我們需要等到所有的 promise 都發生狀態後(有的 fulfil, 有的 reject)，再轉換 Q.all 的狀態, 這時我們可以使用 Q.allSettled

var Q = require('q'),
  fs = require('fs');
/**
 *讀取文件內容
 *@private
 */  
function printFileContent(fileName) {  
  // Todo: 這段代碼不夠簡潔。可以使用Q.denodeify來簡化
  var defer = Q.defer();  
  fs.readFile(fileName, 'utf8', function (err, data) {
    if (!err && data) {
      console.log(data);
      defer.resolve(fileName + ' success ');
    } else {
      defer.reject(fileName + ' fail ');
    }//歡迎加入全棧開發交流圈一起學習交流：864305860
  })
    return defer.promise;    
}  
Q.allSettled([printFileContent('nosuchfile.txt'), 
printFileContent('sample02.txt'), 
printFileContent('sample03.txt'), 
printFileContent('sample04.txt')])
  .then(function (results) {
    results.forEach(
      function (result) {
        console.log(result.state);
      }
    );
  });//歡迎加入全棧開發交流圈一起學習交流：864305860

結束 promise 鏈 通常，對於一個 promise 鏈，有兩種結束的方式。第一種方式是返回最後一個 promise 如 return foo().then(bar); 第二種方式就是通過 done 來結束 promise 鏈如 foo().then(bar).done() 爲什麼需要通過 done 來結束一個 promise 鏈呢? 如果在我們的鏈中有錯誤沒有被處理，那麼在一個正確結束的 promise 鏈中，這個沒被處理的錯誤會通過異常拋出

var Q = require('q'); 
function getPromise(msg, timeout, opt) { 
  var defer = Q.defer(); 
  setTimeout(function () {
    console.log(msg);
    if (opt)
      defer.reject(msg);
    else
      defer.resolve(msg);
  }, timeout); 
  return defer.promise; 
}  //歡迎加入全棧開發交流圈一起學習交流：864305860
/**
 * 沒有用 done() 結束的 promise 鏈
 * 由於 getPromse('2',2000,'opt') 返回 rejected, getPromise('3',1000) 就沒有執行
 * 然後這個異常並沒有任何提醒，是一個潛在的 bug
 */
getPromise('1', 3000)
  .then(function () { return getPromise('2', 2000, 'opt') })
  .then(function () { return getPromise('3', 1000) });
  /**
 * 用 done() 結束的 promise 鏈
 * 有異常拋出
 */
getPromise('1', 3000)
  .then(function () { return getPromise('2', 2000, 'opt') })
  .then(function () { return getPromise('3', 1000) })
  .done();

promise 代表一個異步操作的最終結果。主要通過 promise 的 then 方法訂閱其最終結果的處理回調函數，和訂閱因某原因無法成功獲取最終結果的處理回調函數。

A 與 A+ 的不同點

A+ 規範通過術語 thenable 來區分 promise 對象
A+ 定義 onFulfilled/onRejectd 必須是作爲函數來調用，而且調用過程必須是異步的
A+ 嚴格定義了 then 方法鏈式調用時，onFulfilled/onRejectd 的調用順序

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

手把手教你Node使用Promise替代回調函數原薦

《Python進階》學習筆記

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

深入淺出vue組件之使用slot分發原

深入解析Vue中的computed工作原理原薦

手把手教你Node使用Promise替代回調函數原薦

解析vue重點問題原

深入解析VueJs中的V-bind指令原薦

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

手把手教你Node使用Promise替代回調函數 原 薦

手把手教你Node使用Promise替代回調函數原薦