JS手撕(九) 常用Promise API
2023-06-13 09:16:26 时间
JS手撕(九) 常用Promise API
前言
上一篇已经手撕了一个简单版本的Promise
。现在就在继续手撕常用的Promise API
。
Promise.resolve()
Promise.resolve(value)
方法返回一个以给定值解析后的Promise
对象。如果value
是Promise
对象,则直接返回该promise
。否则返回一个新的Promise
对象。
Promise.myResolve = function (value) {
if (value instanceof Promise) {
return value;
}
return new Promise(resolve => resolve(value));
}
测试
// 1. 普通值
Promise.myResolve(123).then(console.log);
// 2. 成功状态的Promise
const p1 = new Promise(resolve => resolve("11111"));
Promise.myResolve(p1).then(console.log);
// 3. 失败状态的Promise
const p2 = new Promise((resolve, reject) => reject("error"));
Promise.myResolve(p2).catch(console.log);
// 4. 不传参
Promise.myResolve().then(console.log);
// 5. thenable对象
const p3 = {
then(resolve) {
setTimeout(() => resolve(4), 1000)
}
}
Promise.myResolve(p3).then(console.log)
换成原生的结果也一样。
Promise.reject()
Promise.reject()
方法返回一个带有拒绝原因的 Promise
对象。所以只需要直接返回一个新的Promise
对象就行了。
Promise.myReject = function (value) {
return new Promise((resolve, reject) => reject(value));
}
测试:
// 1. 普通值
Promise.myReject(123).catch(console.log);
// 2. 成功状态的Promise
const p1 = new Promise(resolve => resolve("11111"));
Promise.myReject(p1).catch(console.log);
// 3. 失败状态的Promise
const p2 = new Promise((resolve, myReject) => myReject("error"));
Promise.myReject(p2).catch(console.log);
// 4. 不传参
Promise.myReject().catch(console.log);
Promise.all()
参数:promises,promise 的iterable
类型(Array
、Map
、Set
)
返回一个新的 Promise,当所有的 promise 都成功才成功,且结果为成功的结果组成的数组;有一个失败就直接失败,返回的结果就是失败的那一个的结果。(如果有多个,则返回第一个错误的)
const p1 = new Promise((resolve, reject) => {
resolve("p1: OK");
});
const p2 = Promise.resolve("p2: OK");
const result1 = Promise.all([p1, p2]); // 所有Promise的结果都成功
console.log(result1);
const p3 = Promise.resolve("p3: OK");
const p4 = Promise.reject("p4: Err");
const p5 = Promise.reject("p5: Err");
const result2 = Promise.all([p3, p4, p5]); // 有Promise的结果失败
console.log(result2);
实现起来其实就是遍历promises
,并且用一个数组来存成功的结果,当数组的长度等于promises
的长度才调用resolve()
方法,遇到错误的结果的话,直接调用reject()
方法结束。
Promise.myAll = function (promises) {
return new Promise((resolve, reject) => {
const result = [];
promises.forEach(promise => {
promise.then(
(v) => {
result.push(v);
if (result.length === promises.length) {
resolve(result);
}
},
(r) => reject(r)
);
})
})
}
Promise.race()
参数:promises,promise 的iterable
类型(Array
、Map
、Set
)
返回一个新的 Promise,第一个完成的结果是成功则成功,反之则失败。
有前面的Promise.all()
的经验就能发现,race()
和all()
很像,其实就只是all()
如果遇到成功的,需要存储成功的结果。而race()
不需要,第一个完成的结果就直接结束,不会再遍历后面的了。
Promise.myRace = function (promises) {
return new Promise((resolve, reject) => {
promises.forEach(promise => {
promise.then(resolve, reject);
})
})
}
测试:
const p1 = new Promise(resolve => {
setTimeout(() => {
resolve("p1: OK");
});
});
const p2 = Promise.reject("p2: Err");
Promise.myRace([p1, p2])
.then(console.log, console.log); // p2: Err。因为p2先得到结果
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("p3: OK");
});
});
const p4 = Promise.resolve("p4: ok");
Promise.myRace([p3, p4])
.then(console.log, console.log); // p4: ok。因为p4先得到结果
参考
GitHub - qianlongo/fe-handwriting: 手写各种js Promise、apply、call、bind、new、deepClone….
相关文章
- 天气预报api免费接口_天气API
- api接口对接_接口API
- JS跳转代码_js中跳转页面路径
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- JS setAttribute()方法:设置元素的属性值
- Linux API应用:开启新的编程之路(linux的api)
- 华为鸿蒙 HarmonyOS API Version 6 关键差异点官方解读:JS API 和 Java API 变更
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- MSSQL API调用:解放数据开发者(mssql的api调用)
- 开发Redis应用程序的API使用指南(开发redis用的api)
- API控制MySQL数据库快速便捷(api控制mysql)
- API接口实现MySQL数据库连接(api接口连接MySQL)
- 妙用API连接Oracle,轻松实现跨平台连接(api连oracle)
- 快速下载API数据使用MySQL实现(mysql下载api数据)
- 研究Oracle API接口,助推业务发展(oracle api接口)
- js实现DIV的一些简单控制
- IE不出现Flash激活框的小发现的js实现方法
- js实现复制到粘贴板的功能代码
- js中匿名函数的N种写法
- JS自动缩小超出大小的图片
- js里怎么取select标签里的值并修改
- js判断鼠标同时离开两个div的思路及代码
- JS修改URL参数(实现代码)
- 使用JS清空File控件的路径值
- ie中js创建checkbox默认选中问题探讨
- js获取url参数代码实例分享(JS操作URL)
- js获取当前地址JS获取当前URL的示例代码
- js获得参数的getParameter使用示例
- js调试系列控制台命令行API使用方法