Promise是什麼？(承諾)
Promise本意是承諾，在程式中的意思就是承諾我過一段時間後會給你一個結果。 什麼時候會用到過一段時間？答案是非同步操作，非同步是指可能比較長時間才有結果的才做，例如網路請求、讀取本地檔案等。
Promise的三種狀態
pending是物件建立後的初始狀態，當物件fulfill（成功）時變為fulfilled，當物件reject（失敗）時變為rejected。且只能從pengding變為fulfilled或rejected ，而不能逆向或從fulfilled變為rejected 、從rejected變為fulfilled。如圖所示：
Promise是一種非同步流程的控制手段;
- 回撥地獄，程式碼難以維護，第一個的輸入是第二個的輸入。比如常用的ajax呼叫，程式碼如下：
$.ajax(
success(){
$.ajax(
success(){
}
)
}
)
複製程式碼promise鏈式呼叫
- 可以支援多個併發的請求，獲取併發請求中的資料;
a().b()//比如這個a執行完了，執行b
ajax()//1
ajax()//2
複製程式碼- 可以解決非同步的問題，本身不能說promise是非同步的(then方法是非同步的)
promise（承諾）關鍵詞 resolve成功 reject失敗 pending 等待
- 如果一旦promise成功了就不能失敗，相反也是一樣的； 只有狀態是等待的狀態時才可以轉化狀態；每一個promise的例項上都有一個then方法,then方法中有兩個引數，一個引數叫成功的函式，一個是失敗的函式；promise中發生錯誤 就會執行失敗態。
let p = new Promise((resolve,reject)=>{//預設promise中的excutor是同步執行的。
resolve('承諾');//resolev走成功
reject('沒承諾');//reject 走失敗
});
p.then((value)=>{//value成功的原因
console.log('success');
},(err)=>{//err失敗的原因
console.log('faile');
})
複製程式碼用Promise鏈式呼叫讀取檔案解決金字塔demo
金字塔demo:
let fs = require('fs');
fs.readFile('1.txt','utf8',function(err,data){
if(err)return console.log(err);
fs.readFile(data,'utf8',function(err,data){
if(err)return console.log(err);
console.log(data);
fs.readFile(data,'utf8',function(err,data){
if(err)return console.log(err);
console.log(data);
})
})
})
複製程式碼promise 鏈式呼叫
- 如果返回的是promise那麼會取這個promise的結果，如過成功會走外層的promise的下一個then的成功，將資料傳遞到成功裡；
- promise 實現鏈式呼叫返回的並不是this而是一個新的promise。
function read(url) {
return new Promise((resolve,reject)=>{
fs.readFile(url, 'utf8', function (err, data) {
if(err) reject(err);
resolve(data);
})
})
}
// 鏈式呼叫--前提新建兩個文字文件，分別是1.txt和2.txt; 1.txt裡面寫的2.txt,2.txt裡面寫的222
read('1.txt').then((data)=>{
return read(data);//如果返回了一個新的promise
//return 100;//如果返回的是一個普通值就會走到寫一個then中的成功回撥
//throw new Error();//假如成功裡面丟擲個異常，會走下一個then的失敗
}).then(data=>{
console.log(data);//222 輸出的2.txt裡面的內容
},err=>{
console.log(err);
}).then(data=>{
console.log(data,'000');//undefined '000'
});//失敗之後還可以再then,依然會走到成功這裡的then
複製程式碼Promise.all和Promise.race以及Promise.resole Promise.reject
Promise.all 例子：
- Promise.all方法呼叫會返回一個新的promise
let fs = require('fs');
function read(url) {
return new Promise((resolve, reject) => {
fs.readFile(url, 'utf8', function (err, data) {
if (err) reject(err);
resolve(data);
})
})
}
//第一種
// Promise.all([read('1.txt'),read('2.txt')]).then((data)=>{
// console.log(data);
// })
//第二種
Promise.all([read('1.txt'),read('2.txt')]).then((r1,r2)=>{
console.log(r1,r2);
},err=>{
console.log(err);
});
複製程式碼Promise.race 例子：
- Promise.race賽跑 順序執行不一定,處理多個請求只取最快的
let fs = require('fs');
function read(url) {
return new Promise((resolve, reject) => {
fs.readFile(url, 'utf8', function (err, data) {
if (err) reject(err);
resolve(data);
})
})
}
//如果讀取的檔案不存在，就直接走失敗了
Promise.race([read('1.txt'),read('2.txt')]).then((data)=>{
console.log(data);
},err=>{
console.log(err);
});
複製程式碼Promise成功失敗的例子：
- Promise.resolve()返回一個成功的promise
- Promise.reject()返回一個失敗的promise
Promise.resolve('success').then(data=>{
console.log('data')//success
})
Promise.reject('fail').then(null,data=>{//希望第一個引數不傳，此處的null可以忽略掉
console.log(data);//fail
})
複製程式碼Promise原始碼分解
- 根據Promises/A（Promise的官方標準）我們家實現一個160行左右程式碼的Promise。
class Promise {
constructor(executor) {
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
let resolve = (data) => {
if (this.status === 'pending') {
this.value = data;
this.status = 'resolved';
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if (this.status === 'pending') {
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try {
executor(resolve, reject);
} catch (e) {
reject(e);
}
}
then(onFulFilled, onRejected) {
onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
let promise2;
if (this.status === 'resolved') {
promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onFulFilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
}
if (this.status === 'rejected') {
promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0);
});
}
if (this.status === 'pending') {
promise2 = new Promise((resolve, reject) => {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulFilled(this.value);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0)
});
// 存放失敗的回撥
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
})
}
return promise2; // 呼叫then後返回一個新的promise
}
// catch接收的引數 只用錯誤
catch(onRejected) {
// catch就是then的沒有成功的簡寫
return this.then(null, onRejected);
}
}
複製程式碼2、官方給出了一個叫做resolvePromise的函式
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('迴圈引用'));
}
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
let called;
try { // 防止取then是出現異常 Object.defineProperty
let then = x.then; // 取x的then方法 {then:{}}
if (typeof then === 'function') { // 如果then是函式我就認為它是promise
// call 第一個引數是this ，後面的是成功的回撥和失敗的回撥
then.call(x, y => { // 如果y是promise就繼續遞迴解析promise
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, r => { // 只要失敗了就失敗了
if (called) return;
called = true;
reject(r);
});
} else { // then是一個普通物件，就直接成功即可1
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else { // x = 123
resolve(x); // x就是一個普通值
}
}
複製程式碼3、接下來是Promise的常用方法
- Promise.resolve
- Promise.reject
- Promise.race
- Promise.all
//生成一個成功的promise
Promise.resolve = function (val) {
return new Promise((resolve, reject) => resolve(val))
}
//生成一個失敗的promise
Promise.reject = function (val) {
return new Promise((resolve, reject) => reject(val));
}
//Promise.race就是賽跑的意思，哪個結果獲得的快，就返回那個結果，不管結果本身是成功狀態還是失敗狀態。
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject);
}
});
}
//Promise 物件上的靜態方法，該方法的作用是將多個 Promise 物件例項包裝，生成並返回一個新的 Promise 例項。
Promise.all = function (promises) {
return new Promise((resolve,reject)=>{
let arr = [];
let i = 0; // i的目的是為了保證獲取全部成功，來設定的索引
function processData(index,data) {
arr[index] = data;
i++;
if (i === promises.length){
resolve(arr);
}
}
for(let i = 0;i<promises.length;i++){
promises[i].then(data=>{
processData(i,data);
}, reject);
}
})
}
Promise.deferred = Promise.defer = function () {
let dfd = {};
dfd.promise = new Promise((resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
})
return dfd;
}
複製程式碼最後一步一定要記得
module.exports = Promise; //匯出模組
複製程式碼4、完成了一個Promise原始碼，接下來可以安裝一個node模組進行測試程式碼； 安裝模組：npm install promises-aplus-tests -g 執行命令：promises-aplus-tests 檔名
npm install promises-aplus-tests -g //安裝測試模組
promises-aplus-tests Promise.js
複製程式碼