前端 | 异步操作小结

作者: RookieDay | 来源:发表于2019-01-20 15:49 被阅读0次

本文旨在前期学习前端异步过程中的笔记整理，多多指教。

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);
})