文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
❥❥❥❥点个赞,让我知道你来过~❥❥❥❥
Promise
这次,主要介绍 Promise 的all方法和race方法的原理。
【Promise | 手写原理】
【Promise | catch、finally 方法】
all 方法
- 使用
let fs = require('fs');
let p = new Promise((resolve, reject) => {
fs.readFile('./name.txt', 'utf8', function (err, data) {
if (err) {
reject(err);
}
resolve(data);
});
});
Promise.all([1,2,p ]).then(data => {
console.log('data', data);
}, err => {
console.log('err', err);
});
- 思路
- 参数:数组
链式调用then方法:可以
- all 方法返回一个新的Promise
返回值:数组 or 失败原因
- 一个项失败了,走入失败态的回调函数 =>失败原因
- 全部成功了,走入成功态的回调函数 => 数组
- 问题
- 数组项,需要判断是否为一个Promise?
- 如何按照参数数组的顺序生成结果数组?
- 解决
- 在【手写Promise原理】里面有如何判断是否为Promise,可以参考
- 结果数组的顺序与参数数组保持一致:i 计数与参数数组的length相等,即停。
- 代码
function isPromise(x) {
if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
if (typeof x.then === 'function') {
return true;
}
}
return false;
}
Promise.all = function (values){
return new Promise((resolve, reject) => {
let arr = [];
let i = 0;
let processData = (key, data) => {
arr[i] = data;
if (++i === values.length) {
resolve(arr);
}
};
for (let i = 0; i < values.length; i++) {
let current = values[i];
if (isPromise(current)) {
current.then(y => {
processData(i, y);
}, reject);
} else {
processData(i, current);
}
}
});
};
race 方法
- 使用
let fs = require('fs');
let p = new Promise((resolve, reject) => {
fs.readFile('./name.txt', 'utf8', function (err, data) {
if (err) {
reject(err);
}
resolve(data);
});
});
Promise.all([2,p ]).then(data => {
console.log('data', data);
}, err => {
console.log('err', err);
});
- 思路
- 参数:数组
链式调用then方法:可以
- all 方法返回一个新的Promise
返回值:比赛谁先回来
- 一个项失败了,走入失败态的回调函数 =>失败原因
- 先成功的那一项,走入成功态的回调函数 => 比赛
- 问题
- 数组项,需要判断是否为一个Promise?
- 解决
- 在【手写Promise原理】里面有如何判断是否为Promise,可以参考。
- 代码
function isPromise(x) {
if (typeof x === 'function' || (typeof x === 'object' && x != null)) {
if (typeof x.then === 'function') {
return true;
}
}
return false;
}
Promise.race = function (values){
return new Promise((resolve, reject) => {
for (let i = 0; i < values.length; i++) {
let current = values[i];
if (isPromise(current)) {
current.then(resolve, reject);
} else {
resolve(current);
}
}
}});
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。