本文旨在前期学习前端异步过程中的笔记整理，多多指教。
1、迭代器Iterator的模拟
迭代器有一个next方法，每次执行的时候会返回一个对象 对象里面有两个属性，一个是value表示返回的值，还有就是布尔值done,表示是否迭代完成
function buy(books){
let i = 0;
return {
next(){
let done = i == books.length;
let value = !done? books[i++]:undefined;
return {
value,
done
}
}
}
}
let it = buy(['js','node']);
var book;
do{
book = it.next()
console.log(book);
}while(!book.done);
2、生成器Generator的模拟
Generator是一个特殊的函数，执行它会返回一个Iterator对象。 通过遍历迭代器， Generator函数运行后会返回一个遍历器对象，而不是普通函数的返回值。
generator和函数的执行流程不一样。函数是顺序执行，遇到return语句或者最后一行函数语句就返回。而变成generator的函数，在每次调用next()的时候执行，遇到yield语句返回，再次执行时从上次返回的yield语句处继续执行。
function *buy(books){
for(let i = 0; i < books.length;i++){
yield books[i]
}
}
let books = buy(['js','node']);
var book;
do{
book = books.next()
console.log(book);
}while(!book.done);
3、Promise
3.1 基本原理（整理from阮一峰）
#Promise对象是一个构造函数，用来生成Promise实例
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
#demo
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。
3.1.1 Promise.prototype.then()
Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
#getJSON方法（返回的是promise对象）
#参考 http://es6.ruanyifeng.com/#docs/promise
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
#上面的代码使用then方法，依次指定了两个回调函数。
#第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
第一个then回调函数返回promise对象
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
console.log("resolved: ", comments);
}, function funcB(err){
console.log("rejected: ", err);
});
上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB。
此外还有：Promise.prototype.catch() 、 Promise.prototype.finally()
3.1.2 Promise.all()
Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
let p1 = new Promise(function(resolve,reject){
setTimeout(() => {
resolve(100);
}, 1000);
})
let p2 = new Promise(function(resolve,reject){
setTimeout(() => {
resolve(200);
}, 2000);
})
// Promise.all 会接收一个promise数组，如果promise全部完成这个
// promise才会成功，如果有一个失败，那么这个promise就整个失败了
console.time('cost')
// 同时异步请求多个数据的时候 会用all
Promise.all([p1,p2]).then(function(data){
console.log(data);
console.timeEnd('cost');
},function(err){
console.log(err);
})
3.1.3 Promise.race()
const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
谁先回来用谁的
let p1 = new Promise(function(resolve,reject){
setTimeout(() => {
reject(100);
}, 1000);
})
let p2 = new Promise(function(resolve,reject){
setTimeout(() => {
resolve(200);
}, 2000);
})
// Promise.race 会接收一个promise数组，只要有一个成功就成功了，有一个失败就失败了
console.time('cost')
Promise.race([p1,p2]).then(function(data){
console.log(data);
console.timeEnd('cost');
},function(err){
console.log(err);
})
3.1.4 Promise.resolve()
将现有对象转为 Promise 对象
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
a、如果参数是一个thenable对象
thenable对象指的是具有then方法的对象，比如下面这个对象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。
b、参数不是具有then方法的对象，或根本就不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
const p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
3.2 Promise/A+规范
Promise/A+规范中文版
Promise/A+规范英文版
下面我们尝试重写下Promise
//Promise.js
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REHECTED = 'rejected';
function Promise(exector){
let self = this;
self.status = PENDING;
self.value = undefined;
self.onResolvedCallbacks = [];
self.onRejectedCallbacks = [];
function resolve(value){
if(value instanceof Promise){
return value.then(resolve,reject);
}
setTimeout(() => {
if(self.status == PENDING){
self.status = FULFILLED;
self.value = value;
self.onResolvedCallbacks.forEach(cb=>cb(value));
}
});
}
function reject(reason){
setTimeout(() => {
if(self.status == PENDING){
self.status = REHECTED;
self.value = reason;
self.onRejectedCallbacks.forEach(cb=>cb(reason));
}
});
}
try {
exector(resolve,reject);
} catch (e) {
reject(e);
}
}
function resolvePromise(promise2,x,resolve,reject){
// 如果x就是promise2 死循环，一直处于pending状态
if(promise2 === x){
return reject(new TypeError('循环引用'));
}
let called = false; //promise是否已经resolve / reject
if(x instanceof Promise){
if(x.status == PENDING){
x.then(function(y){
// 递归调用
resolvePromise(promise2,y,resolve,reject);
},reject);
}else{
x.then(resolve,reject);
}
// x是一个thenable对象或函数 只要有then方法的对象
} else if(x != null && ((typeof x == 'object' || typeof x == 'function'))){
try { //取then的时候可能抛异常 这里捕捉下
let then = x.then;
if(typeof then == 'function'){
// 有些Promise会同时执行成功和失败的回调
// 如果promise2已经成功或者失败了，则不要再处理了
then.call(x,function(y){
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject);
},function(err){
if(called) return;
called = true;
reject(err);
})
} else{
// 到此的话 x不是一个thenable对象那直接当成值resolve
// 比如返回是一个对象的时候：{name:'haha'，then:{}}会出现这样的情况
resolve(x);
}
} catch (e) {
if(called) return;
called = true;
reject(e);
}
}else {
//如果x是一个普通的值，则用x的值resolve promise2
resolve(x);
}
}
Promise.prototype.then = function(onFulfilled,onRejected){
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled:value=>value;
onRejected = typeof onRejected == 'function' ? onRejected:value=>{throw value;}
let self = this;
let promise2;
if(self.status == FULFILLED){
promise2 = new Promise(function(resolve,reject){
setTimeout(() => {
try {
let x = onFulfilled(self.value);
resolvePromise(promise2,x,resolve,reject);
} catch (e) {
reject(e);
}
});
})
}
if(self.status == REHECTED){
promise2 = new Promise(function(resolve,reject){
setTimeout(() => {
try {
let x = onRejected(self.value);
resolvePromise(promise2,x,resolve,reject);
} catch (e) {
reject(e);
}
});
})
}
if(self.status == PENDING){
promise2 = new Promise(function(resolve,reject){
self.onResolvedCallbacks.push(function(value){
setTimeout(() => {
try {
let x = onFulfilled(value);
resolvePromise(promise2,x,resolve,reject);
} catch (e) {
reject(e);
}
});
})
self.onRejectedCallbacks.push(function(value){
setTimeout(() => {
try {
let x = onRejected(value);
resolvePromise(promise2,x,resolve,reject);
} catch (e) {
reject(e);
}
});
})
})
}
return promise2;
}
Promise.prototype.catch = function(onRejected){
this.then(null,onRejected);
}
Promise.deferred = Promise.defer = function(){
let df = {}
df.promise = new Promise(function(resolve,reject){
df.resolve = resolve;
df.reject = reject;
})
return df;
}
function gen(times,cb){
let result = [], count = 0;
return function(i,data){
result[i] = data;
if(++count == times){
cb(result);
}
}
}
// 都成功了才会成功
Promise.all = function(promises){
return new Promise(function(resolve,reject){
let done = gen(promises.length,resolve);
for(let i = 0; i < promises.length; i++){
promises[i].then(function(data){
done(i,data);
},reject)
}
})
}
// 都成功了才会成功
Promise.race = function(promises){
return new Promise(function(resolve,reject){
for(let i = 0; i < promises.length; i++){
promises[i].then(resolve,reject)
}
})
}
module.exports = Promise;
使用promises-aplus-tests对该方法进行测试
promises-aplus-tests Promise.js
Promise测试.png
下面我们简单做下测试
let Promise = require('./Promise')
let p1 = new Promise(function(resolve,reject){
setTimeout(() => {
let num = Math.random();
if(num > .5){
resolve('ok')
}else{
reject('failed')
}
}, 1000);
})
// 测试1
// p1.then(function(data){
// console.log(data);
// },function(reason){
// console.log(reason);
// })
// 测试2
// 里面函数返回的是一个新的promise实例
// let p2 = p1.then(function(data){
// console.log(data);
// return new Promise(function(resolve,reject){
// resolve(1000); //异步成功的结果传递给P2的resolved
// })
// },function(err){
// console.log(err);
// return new Promise(function(resolve,reject){
// reject(2000);
// })
// })
// p2.then(function(data){
// console.log(data);
// },function(reason){
// console.log(reason);
// })
// 测试3
// p1.then('aaa').then(function(data){
// console.log(data);
// },function(err){
// console.log(err)
// })
// 测试4 循环引用
// let p2 = p1.then(function(data){
// return p2
// },function(err){
// return p2;
// })
// p2.then(function(data){
// console.log(data);
// },function(err){
// console.log(err)
// })
// 测试5 thenable 调用后返回不是函数
let p2 = p1.then(function(data){
// 不是thenable对象
return {name:'hhaa',then:{}}
},function(err){
console.log(err);
})
p2.then(function(data){
console.log(data);
},function(err){
console.log(err);
})
4、Q的使用
//
let Q = require('q');
let fs =require('fs');
function readFile(filename){
let defer = Q.defer();
fs.readFile(filename,'utf-8',function(err,data){
if(err){
defer.reject(err);
} else{
defer.resolve(data);
}
})
return defer.promise;
}
readFile('./1.txt').then(function(data){
console.log(data);
})
参照上面的调用方式，简单实现Q
//Q的简单实现
let Q = {
defer(){
let success, error;
return {
resolve(data){
success(data);
},
reject(err){
error(err);
},
promise:{
then(onFulfilled,onRejected){
success = onFulfilled;
error = onRejected;
}
}
}
}
}
5、bluebird的使用
let Promise = require('bluebird');
let fs = require('fs');
let readFile = fs.readFile;
//可以把把一个普通的异步方法转成返回promise的方法
let readFileSync = Promise.promisify(readFile);
readFileSync('./1.txt','utf8').then(function(data){
console.log(data);
})
//promisify的简单实现
function promisify(fn){
return function(...args){
return new Promise(function(resolve,reject){
fn.apply(null,[...args,function(err,data){
err?reject(err):resolve(data);
}])
})
}
}
Promise.promisifyAll
// 会遍历对象所有方法，然后都复制一份 对每个方法添加一个新的方法Async
Promise.promisifyAll(fs);
fs.readFileAsync('./1.txt','utf8').then(data=>console.log(data));
function promisifyAll(obj){
for(let key in obj){
if(obj.hasOwnProperty(key)&& typeof obj[key] =='function'){
obj[key+'Async'] = Promise.promisify(obj[key]);
}
}
}
6、generator + promise
let fs = require('fs');
function readFile(filename){
return new Promise(function(resolve,reject){
fs.readFile(filename,'utf-8',function(err,data){
err?reject(err):resolve(data);
})
})
}
function *read(){
console.log('start');
let a = yield readFile('./promise/1.txt');
console.log(a);
let b = yield readFile('./promise/2.txt');
console.log(b)
let c = yield readFile('./promise/3.txt');
console.log(c);
return c;
}
let it = read();//调用生成器返回迭代器
let r1 = it.next();
r1.value.then(function(data){
console.log('haha'+data);
let r2 = it.next(data);
r2.value.then(function(data){
let r3 = it.next(data);
r3.value.then(function(data){
let r4 = it.next(data);
console.log(r4);
})
})
})
7、co
基于第六条，我们这里使用co来简化
let fs = require('fs');
let co = require('co');
function readFile(filename){
return new Promise(function(resolve,reject){
fs.readFile(filename,'utf-8',function(err,data){
err?reject(err):resolve(data);
})
})
}
function *read(){
console.log('start');
let a = yield readFile('./promise/1.txt');
console.log(a);
let b = yield readFile('./promise/2.txt');
console.log(b)
let c = yield readFile('./promise/3.txt');
console.log(c);
return c;
}
co(read);
co的原理实现
// co是用来自动执行迭代器的
function co(gen){
let it = gen(); //我们让我们的生成器持续执行
return new Promise(function(resolve,reject){
!function next(lastVal){ //自执行函数
let {value,done} = it.next(lastVal);
if(done){
resolve(value);
} else{
value.then(next,reject)
}
}()
})
}
8、async await
// async await 异步终极解决方案
// 他只是generator+promise的语法糖
let fs = require('fs');
function readFile(filename){
return new Promise(function(resolve,reject){
fs.readFile(filename,'utf8',function(err,data){
err?reject(err):resolve(data);
})
})
}
// 如果代码里面有异步代码，前面加async,方法返回promise需要await
async function read(){
let a = await readFile('./1.txt');
console.log(a)
let b = await readFile('./2.txt');
console.log(b);
let c = await readFile('./3.txt');
console.log(c)
return 'ok';
}
read().then(data=>console.log(data))
拓展
//获取前端返回的页面和数据
let html = {};
let fs = require('fs');
function render(length,cb){
let html = {};
return function(key,value){
html[key]=value;
if(Object.keys(html).length == length){
cb(html);
}
}
}
let done = render(2,function(html){
console.log(html);
})
fs.readFile('./template.txt','utf8',function(err,template){
done('template',template);
})
fs.readFile('./data.txt','utf8',function(err,data){
done('data',data);
})