Promise原理讲解 async+await应用（异步回调解决方案）

• 1.异步编程 1.1.回调函数
• 1.2 发布订阅
• 1.3 观察者模式
  
• 1.4 Promise

1.异步编程

JavaScript

单线

JavaScript

• 回调函数
• 发布订阅
• 观察者模式
• promise

1.1.回调函数

function call(id, callback){
return function(){
callback(id+1);
}
}
let fn = call(3, function(id){
console.log(id);
})
fn();

lodash 里面的after函数实现方法

function after(times, callback){
return function(){
//次数一直减少
if(--times == 0){
callback();
}
}
}
let fn = after(3, function(){
console.log('after 被调用了三次');
})
fn();
fn();
fn();

接下来就是常见的读取数据的问题，回调函数的话，我们只能一层一层往下读取，很容易就进入了

回调地狱

let fs = require('fs');
let school = {}
fs.readFile('./age.txt', 'utf8', function (err, data) {
school['name'] = data;
fs.readFile('./name.txt', 'utf8', function (err, data) {
school['age'] = data;//{ name: 'cjw', age: '18' }
});
});

1.2 发布订阅

发布者和订阅者是没有依赖关系的

document.body.addEventListener('click',function(){
alert(2);
},false);
document.body.click();    //模拟用户点击

实现原理

let fs = require('fs');

let dep = {
arr: [],//保存回调函数
on(callback){
this.arr.push(callback);
},
emit(){
this.arr.forEach(item=>{
item();
})
}
}

let school = {};
//这里先加一个回调函数 (订阅)
dep.on(function(){
if(Object.keys(school).length === 2){
console.log(school);//{ name: 'cjw', age: '18' }
}
})
//
fs.readFile('./age.txt', 'utf8', function(err, data){
school['name'] = data;
dep.emit();//发布,调用dep.arr 里面的回调函数一一执行
})
fs.readFile('./name.txt', 'utf8', function(err, data){
school['age'] = data;
dep.emit();//发布
})

1.3 观察者模式

观察者模式 发布和订阅的 被观察者是依赖于观察者的

//观察者
class Observer{
constructor(){
this.arr = [];
this.val = 1;
}
updateVal(val){
this.val = val;
this.notify();
}
notify(){
this.arr.forEach(s=>s.update());
}
save(s){//保存一个对象
this.arr.push(s);
}
}
// 被观察者，被观察者有一个更新的方法。
class Subject{
update(){
console.log('update')
}
}
let s = new Subject();
let observer = new Observer();
observer.save(s);//保存一个对象
observer.save(s);
observer.updateVal(21);//更新值的时候，被观察者也执行一个更新的方法

1.4 Promise

promise

1

Promise

pending

fulfilled

rejected

2

Promise

pending

fulfilled

pending

rejected

let fs = require('fs');
function read(url){
return new Promise((resolve, reject)=>{
fs.readFile(url, 'utf8', (err, data)=>{
if(err) reject(err);
resolve(data);
})
})
}
let school = {};
read('./name.txt').then(data=>{
school['name'] = data;
return read('age.txt');
}).then(data=>{
school['age'] = data;
console.log(school);//{ name: 'cjw', age: '18' }
})

2.promise用法与原理

2.1

Promise.prototype.then()

Promise

then

then

//let Promise = require('./promise.js');
let p = new Promise((resolve, reject)=>{
setTimeout(function(){
reject('成功');
},100)
reject('3');
})
p.then((value)=>{
console.log(value);//3,这里是3因为，只能从一个状态panding到另一个状态
}, (reason)=>{
console.log(reason);
})

基本概念

1.

new Promise

executor

resolve

reject

pending

promise

then

then

promise

then

pengding

Promise.prototype.then()

function Promise(executor){
var self = this;
self.status = 'pending';//从pending 转换为resolved rejected
self.value = undefined;
self.reason = undefined;
self.onResolved = [];//专门存放成功的回调
self.onRejected = [];//专门存放失败的回调
//pending -> resolved
function resolve(value){
if(self.status === 'pending'){
self.value = value;
self.status = 'resolved';
self.onResolved.forEach(fn=>fn());
}
}
//pending -> rejected
function reject(reason){
if(self.status === 'pending'){
self.reason = reason;
self.status = 'rejected';
self.onRejected.forEach(fn=>fn());
}
}
try{
executor(resolve, reject);
}catch(e){
reject(e);
}
}
//then方法的实现
Promise.prototype.then = function(onfulfilled, onrejected){
let self = this;
if(self.status === 'resolved'){//判断状态，resolved时候，返回value
onfulfilled(self.value);
}
if(self.status === 'rejected'){//判断状态，rejected时候，返回reason
onrejected(self.reason);
}

if(self.status === 'pending'){
self.onResolved.push(function(){
onfulfilled(self.value);
})
self.onRejected.push(function(){
onfulfilled(self.reason);
})
}
}
module.exports = Promise;

2.2

Promise.prototype.catch()

Promise.prototype.catch方法

.then(null, rejection)

let p = new Promise((resolve, reject)=>{
resolve();
})
p.then(data=>{
throw new Error();
}).then(null).catch(err=>{
console.log('catch', err)
}).then(null, err=>{
console.log('err', err);
})

实现原理

Promise.prototype.catch = function(onrejected){
return this.then(null, onrejected);
}

2.3

Promise.all

Promise.all

Promise

const p = Promise.all([p1, p2, p3]);

实现原理

Promise.all = function (promises) {
return new Promise((resolve, reject) => {
let results = []; let i = 0;
function processData(index, data) {
results[index] = data; // let arr = []  arr[2] = 100
if (++i === promises.length) {
resolve(results);
}
}
for (let i = 0; i < promises.length; i++) {
let p = promises[i];
p.then((data) => { // 成功后把结果和当前索引 关联起来
processData(i, data);
}, reject);
}
})
}

2.4

Promise.race

Promise.race

Promise

Promise

const p = Promise.race([p1, p2, p3]);

上面代码中，只要

p1

p2

p3

Promise

let Promise = require('./e2.promise');
let fs = require('mz/fs');

Promise.race([
fs.readFile('./age.txt', 'utf8'),
fs.readFile('./name.txt', 'utf8')
]).then(data=>{
console.log(data);
})

实现原理

Promise.race = function(promises){
return new Promise((resolve, reject)=>{
for(let i=0; i< promises.length; i++){
let p = promises[i];
p.then(resolve, reject);
}
})
}

2.5

Promise.resolve

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

const p = Promise.resolve();

p.then(function () {
// ...
});

实现原理

Promise.resolve = function(value){
return new Promise((resolve, reject)=>{
resolve(value);
})
}

2.6

Promise.reject

Promise.reject方法允许调用时不带参数，直接返回一个rejected状态的 Promise 对象。

const p = Promise.reject();

p.then(function () {
// ...
});

实现原理

Promise.reject = function(reason){
return new Promise((resolve, reject)=>{
reject(reason);
})
}

2.7

promise

的一些扩展库

bluebird

mz

2.8 应用

async + await = generator + co

generator

*  generator

yield

function * read() {
yield 1;
yield 2;
yield 3;
return 100
}
let it = read();
console.dir(it.next());
console.dir(it.next());
console.dir(it.next());
console.dir(it.next());
//结果：
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 100, done: true }

promise + generator

let fs = require('mz/fs');
// let co = require('co');

function * read(){
let age = yield fs.readFile('./age.txt', 'utf8');
return age;
}

//co 原理
function co(it){
return new Promise((resolve, reject)=>{
function next(data){
let { value, done } = it.next(data);
if(!done){
value.then(data=>{
next(data);
}, reject)
}else{
resolve(value);
}
}
next();
})
}

co(read()).then(data=>{
console.log(data);//18
}, err=>{
console.log(err);
})

async + await

let fs = require('mz/fs');//这个mz库将nodejs里面的fs全部函数都promise化
// async 函数就是promise es7
// 回调的问题 不能try/catch 并发问题
async function read() {
let age = await fs.readFile('name.txt','utf8')
return age
}
read().then(data=>{
console.log(data);//cjw
})

3.手写一个promise A+

promise A+ 规范传送门

测试代码是否符合a+ 规范 为了让其能测试

npm install promises-aplus-tests -g
promises-aplus-tests 文件名 可以测试

/*
* @Author: caijw
* @Date: 2018-10-01 15:04:43
* @Last Modified by: caijw
* @Last Modified time: 2018-10-08 22:41:06
*/
function Promise(executor){
var self = this;
self.status = 'pending';//从pending 转换为resolved rejected
self.value = undefined;
self.reason = undefined;
self.onResolved = [];//专门存放成功的回调
self.onRejected = [];//专门存放失败的回调
//pending -> resolved
function resolve(value){
if(self.status === 'pending'){
self.value = value;
self.status = 'resolved';
self.onResolved.forEach(fn=>fn());
}
}
//pending -> rejected
function reject(reason){
if(self.status === 'pending'){
self.reason = reason;
self.status = 'rejected';
self.onRejected.forEach(fn=>fn());
}
}
try{
executor(resolve, reject);
}catch(e){
reject(e);
}
}

//这里主要就是递归循环，判断是否为promise，如果是promise就继续递归循环下去。
function resolvePromise(promise2, x, resolve, reject){
if(promise2 === x){
return reject(new TypeError('循环引用'));
}

let called;
if(x!=null && (typeof x === 'object' || typeof x === 'function')){
try{
let then = x.then;
//假设他是一个promise，then方法就是一个函数
if(typeof then === 'function'){
then.call(x, (y)=>{
if(called) return;
called = true;
// 递归解析 如果resolve的是一个promise 就要不停的让resolve的结果进行处理
resolvePromise(promise2, y, resolve, reject);
},(e)=>{
if(called) return;
called = true;
reject(e);
})
}else{//不是就返回
resolve(x);
}
}catch(e){
if(called) return;
called = true;
reject(e);
}

}else{
resolve(x);
}
}

//至返回错误的 catch 就是不写成功的回调的then方法
Promise.prototype.catch = function(onrejected){
return this.then(null, onrejected);
}

//1.解决输出的顺序的问题
// all方法的参数 是一个数组，会按照数组的结果放到成功的回调里(只有全成功才算成功)
// race方法参数也是一个数组。会同时发起并发，但是以返回最快的结果为结果

Promise.race = function(promises){
return new Promise((resolve, reject)=>{
for(let i=0; i< promises.length; i++){
let p = promises[i];
p.then(resolve, reject);
}
})
}

Promise.reject = function(reason){
return new Promise((resolve, reject)=>{
reject(reason);
})
}

Promise.resolve = function(value){
return new Promise((resolve, reject)=>{
resolve(value);
})
}

Promise.all = function (promises) {
return new Promise((resolve, reject) => {
let results = []; let i = 0;
function processData(index, data) {
results[index] = data; // let arr = []  arr[2] = 100
if (++i === promises.length) {
resolve(results);
}
}
for (let i = 0; i < promises.length; i++) {
let p = promises[i];
p.then((data) => { // 成功后把结果和当前索引 关联起来
processData(i, data);
}, reject);
}
})
}

//回调函数
Promise.prototype.then = function(onfulfilled, onrejected){
// onfulfilled / onrejected是一个可选的参数
onfulfilled = typeof onfulfilled == 'function' ? onfulfilled :  val=>val;
onrejected = typeof onrejected === 'function' ? onrejected :err => {
throw err;
}
let self = this;

let promise2;
promise2 = new Promise((resolve, reject)=>{
if(self.status === 'resolved'){
setTimeout(()=>{
try{
let x = onfulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
}catch(e){
reject(e);
}
}, 0)
}
if(self.status === 'rejected'){
setTimeout(()=>{
try{
let x = onrejected(self.reason);
resolvePromise(promise2, x, resolve, reject);
}catch(e){
reject(e);
}
}, 0)

}
if(self.status === 'pending'){
self.onResolved.push(function(){
setTimeout(()=>{
try{
let x = onfulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
}catch(e){
reject(e);
}
}, 0)
})
self.onRejected.push(function(){
setTimeout(()=>{
try{
let x = onrejected(self.reason);
resolvePromise(promise2, x, resolve, reject);
}catch(e){
reject(e);
}
}, 0)
})
}
})
return promise2;
}
// 语法糖 简化问题 嵌套的问题 ，被废弃了
Promise.defer = Promise.deferred = function(){
let dfd = {};
dfd.promise = new Promise((resolve, reject)=>{
dfd.resolve = resolve;
dfd.reject = reject;
})
return dfd;
}

module.exports = Promise;

参考文档

ECMAScript 6 入门 Promise--阮一峰

Hey, 你的Promise

ES6版Promise实现，给你不一样的体验

使用 Bluebird 开发异步的 JavaScript 程序