非同步發展流程： callback-> promise -> generator -> async + await
promise實現過程： 例子：
p1.then((res) => {
return new Promise((resolve ,reject)=>{
return new Promise((resolve,reject)=>{
resolve('kk')
})
})
},(err)=>{
console.log(err)
}).always((data,err)=>{
console.log(data,err)
})
複製程式碼//promise2是then方法裡面新new出來並return的promise，用於儲存當前then方法處理的最後的結果和狀//態,供下一個then使用；而x指的是當前被呼叫的then方法裡面的回撥函式執行的結果（可能是一個promise也可能是一個數值）；resolve和reject //都是屬於promise2的
function resolvePromise(promise2, x, resolve, reject) {
// 判斷x是不是promise
// 規範裡規定了一段程式碼，這個程式碼可以實現我們的promise和別人的promise可以進行互動
if (promise2 === x) { // 不能自己等待自己完成
return reject(new TypeError('迴圈引用'));
}
// x不是null或者是物件或者函式
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，then方法的用途就是執行函式，將最新的狀態和值儲存到當前promsie中
if(called) return;
called = true;
//這裡的resolve和reject依然是promise2的
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和reject依然是promise2
resolve(x); // x就是一個普通值，最後的非promise走這裡，將x存到promise 中的value中
}
}
class Promise {
//傳入executor，自動執行。executor非延時情況下，將生成一個帶有狀態和值的promsie，延時情
//況下，延時觸發回撥後更新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 { // 執行時可能會發生異常：throw err
executor(resolve, reject);
} catch (e) {
reject(e); // promise失敗了
}
}
then(onFulFilled, onRejected) {
// 解決onFulFilled,onRejected沒有傳的問題
onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
let promise2;
if (this.status === 'resolved') {
//鏈式呼叫，返回一個新的promise2，所有的狀態和值都存在promise2中
promise2 = new Promise((resolve, reject) => {
// 定時器實現非同步
setTimeout(() => {
//捕獲then方法裡面的throw err
try {
//這裡的this指的是前一個promise，x就是回撥函式的執行結果
let x = onFulFilled(this.value);//第一次傳入'hh'
/*
onFulFilled就是個回撥，執行回撥返回的值給x，此時如果回撥函式中沒有return，則x=undefined;執行後面的resolvePromise時，直接resolve
*/
//前一個promise儲存的value值傳過去，並執行直//到非promise為止，然後///把所得值存到當前promise中，供下一個promise使用
// resolvePromise可以解析x和promise2之間的關係
resolvePromise(this, 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(this, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0);
});
}
// 當前既沒有完成 也沒有失敗:如延時觸發resolve setTimeout(()=>resolve; 50)
if (this.status === 'pending') {
// 存放成功的回撥
promise2 = new Promise((resolve, reject) => {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulFilled(this.value);
resolvePromise(this, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0)
});
// 存放失敗的回撥
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(this, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
})
}
return promise2; // 呼叫then後返回一個新的promise
}
// catch接收的引數 只用錯誤
catch(onRejected) {
// catch就是then的沒有成功的簡寫
return this.then(null, onRejected);
}
always(callback) {
setTimeout(() => {
console.log(this.status)
return this.then((value)=>{
callback(value,undefined)
},(reason) => {
callback(undefined, reason);
})
}, 0);
}
}
Promise.resolve = function (val) {
return new Promise((resolve, reject) => resolve(val))
}
Promise.reject = function (val) {
return new Promise((resolve, reject) => reject(val));
}
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject);
}
});
}
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;
}
複製程式碼bluebird庫幫我們promise化
let bluebird = require('bluebird');
// promise化 幫我們把一個非同步方法轉化成promise方法
let fs = require('fs');
function promisifyAll(obj) { // 全部promise化
for(let key in obj){
if(typeof obj[key] === 'function'){
obj[key + 'Async'] = promisify(obj[key]);
}
}
}
let r = promisifyAll(fs);
//將fs.readFile promsie 化後需要加一個Async字尾
fs.readFileAsync('./2.promise.js/a.txt','utf8').then(data=>{
console.log(data);
});
//node中的所有檔案操作函式都可以promise化。自己也可以手寫一個promsie 化的函式
function promisify(fn) {
return function (...args) {
return new Promise((resolve,reject)=>{
fn(...args,function (err,data) {
if(err)reject(err);
resolve(data);
})
});
}
}
複製程式碼下面說generator函式（迭代器函式）
// [Symbol.iterator]後面的函式就叫迭代器函式
// 迭代器函式會返回一個物件 it
let obj = {0:1,1:2,length:2,[Symbol.iterator]:function () {
let index = 0;
let that = this;
return {
next(){ //物件中必須要返回一個next方法
return {
value: 1, // value代表的是值
done: index++ === that.length // done代表的是是否迭代完成
}
}
}
}}
let arr = [...obj];
console.log(arr);
function read(arr) {
let index = 0;
return {
next(){
return {
value:arr[index],
done:index++ >= arr.length
}
}
}
}
// let it = read(['vue','react','node']);
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// console.log(it.next());
// * 和 yield一起使用，yield產出
function * gen() { // 可以暫停，呼叫next才會繼續走
let a = yield '買菜'; // a的結果是買回來的菜
let b = 3+(yield a); // b的結果是做好的菜
return b; // 返回做好的菜
}
let a = gen('菜'); // 執行後返回的是迭代器
console.log(a.next());//走到yield，將yield 後面的值作為value,停止
console.log(a.next('買好的菜'));// 將傳入的引數作為yield的值，此時a='買好的菜'，走到下一個yield 停止，value 值為a
console.log(a.next(4));//將4作為yield 的值(必須要有小括號)，此時b = 7,return 7,value :7 done：true
// 第一次呼叫next傳遞的引數沒有任何意義,下一次next傳遞的引數 是上次yield的返回值
下面結合promise來寫點功能
複製程式碼let {promisify} = require('bluebird');
let fs = require('fs');
let read = promisify(fs.readFile);//promise化
function * gen() {
let b = yield read('a.txt','utf8');
let c = yield read(b,'utf8');
return c;
}
let it = gen();
it.next().value.then(data=>{
it.next(data).value.then(data=>{
console.log(it.next(data).value);
})
})
複製程式碼可以看出上面的程式碼層層巢狀，使co庫可以簡便很多; 改造如下:
// co 可以幫你執行promise
let co = require('co');
co(gen()).then(data=>{
console.log(data);
});
複製程式碼co具體實現原理大致如下：
function co(it) {
// 非同步遞迴怎麼實現
return new Promise((resolve,reject)=>{
function next(data){ // next是為了實現非同步迭代
let { value, done } = it.next(data);
if(!done){
value.then((data=>{
// 當第一個promise執行完再繼續執行下一個next
next(data);
}), reject); // 有一個失敗了就失敗了
}else{ // 迭代成功後將成功的結果返回
resolve(value);
}
}
next();
});
}
複製程式碼下面介紹下async+await(是generator的語法糖);async返回的結果是一個promise;await後面只能跟著promise
let { promisify } = require('bluebird');
let fs = require('fs');
let read = promisify(fs.readFile);
async function r() {
let b = await Promise.all([read('a.txt', 'utf8'), read('b.txt', 'utf8')]);
return b;
};
r().then(data=>{
console.log(data);
});
複製程式碼