Promise的使用与实现源码
使用01
const Promise = require('./P01.js');
const p = new Promise((resolve, reject) => {
//ajax,定时器
console.log(123);
// throw new Error('Error');
resolve('成功了');
// reject('失败了');
});
p.then((data) => {
console.log(data, 'success01');
}, (err) => {
console.log(err, 'fail01');
});
p.then((data) => {
console.log(data, 'success02');
}, (err) => {
console.log(err, 'fail02');
});
console.log(456);
/*
myFunc
123
成功了 success01
成功了 success02
456
*/
Promise源码01
const DENG = 'DENG'; //等待态
const CHENG = 'CHENG'; //成功态
const SHI = 'SHI'; //失败态
class Promise {
constructor(myFunc) {
console.log('myFunc');
this.status = DENG;
//成功的参数
this.value = undefined;
//失败的参数
this.reason = undefined;
//失败回调函数
let reject = (r) => {
if (this.status === DENG) {
this.status = SHI;
this.reason = r;
}
};
//成功回调函数
let resolve = (v) => {
if (this.status === DENG) {
this.status = CHENG;
this.value = v;
}
}
//异常处理01
try {
myFunc(resolve, reject);
} catch (error) {
reject(error);
}
}
//Promise原型链上then方法
then(onfulfilled, onrejected) {
//分三种状态分类讨论
//成功态
if (this.status === CHENG) {
onfulfilled(this.value);
}
//失败态
if (this.status === SHI) {
onrejected(this.reason);
}
//等待态
if (this.status === DENG) {
console.log('DENG');
}
}
}
module.exports = Promise;
使用02-异步定时器
const Promise = require('./P01.js');
const p = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve('>0.5');
} else {
reject('<=0.5');
}
}, 1000);
});
p.then((data) => {
console.log('success01', data);
}, (err) => {
console.log('fail01' + err);
});
p.then((data) => {
console.log('success02', data);
}, (err) => {
console.log('fail02' + err);
});
/*
success01 >0.5
success02 >0.5
*/
Promise源码02-异步定时器
const DENG = 'DENG'; //等待态
const CHENG = 'CHENG'; //成功态
const SHI = 'SHI'; //失败态
class Promise {
constructor(myFunc) {
console.log('myFunc');
this.status = DENG;
//成功的参数
this.value = undefined;
//失败的参数
this.reason = undefined;
//异步函数数组
this.resolveCallbacks = [];
this.rejectCallbacks = [];
//失败回调函数
let reject = (r) => {
if (this.status === DENG) {
this.status = SHI;
this.reason = r;
this.rejectCallbacks.forEach(fn => fn());
}
};
//成功回调函数
let resolve = (v) => {
if (this.status === DENG) {
this.status = CHENG;
this.value = v;
this.resolveCallbacks.forEach(fn => fn());
}
}
//异常处理01
try {
myFunc(resolve, reject);
} catch (error) {
reject(error);
}
}
//Promise原型链上then方法
then(onfulfilled, onrejected) {
//分三种状态分类讨论
//成功态
if (this.status === CHENG) {
onfulfilled(this.value);
}
//失败态
if (this.status === SHI) {
onrejected(this.reason);
}
//等待态
if (this.status === DENG) {
//把成功回调保存起来,方便以后状态确定后调用
this.resolveCallbacks.push(() => {
onfulfilled(this.value);
});
//把失败回调保存起来,方便以后状态确定后调用
this.rejectCallbacks.push(() => {
onrejected(this.reason);
});
}
}
}
module.exports = Promise;
使用03-链式调用
const fs = require('fs');
//封装Promise
function readFile(name, encoding) {
return new Promise((resolve, reject) => {
fs.readFile(name, encoding, function (err, data) {
if (err) return reject(err);
resolve(data);
});
});
}
/*
### 一个Promise实例可以连续打点调用then,链式调用
- 1.上一次then的return 是 Promise实例,该实例如果是成功态,走成功回调
该实例如果是失败态,走失败回调
- 2.上一次then的return 是 10|[]|undefined,走下一次then的成功回调
- 3.上一次then抛异常会走下一次then的失败回调
*/
readFile('./c1.txt', 'utf-8').then((data) => {
console.log('s1', data);
//*****
return readFile('./b.txt', 'utf-8');
// return 30;
// throw new Error('err');
// return[1,3,5];
}, (err) => {
console.log('r1', err);
//--------连续调then
}).then((data) => {
console.log('s2', data);
}, (err) => {
console.log('r2', err);
//--------连续调then
}).then((data) => {
console.log('s3', data);
}, (err) => {
console.log('r3', err);
});
//先打印
console.log(111);
Promise源码03-链式调用
await / async