JS里的异步实例化
JS里的异步构造函数
众所周知,Js的构造函数是不能加上async/await来实现异步实例化的,一般当需要一个对象的属性是异步的结果时可以这样写:
//! 一个需要指定时间后返回的异步函数
function delay(timeout) {
return new Promise((resolve) => setTimeout(() => resolve("end"), timeout));
}
class Test {
async init() {
this.end = await delay(1000);
}
}
(async function () {
const test = new Test(); //? 实例化
await test.init(); //? 初始化end属性
console.log(test.end);
})();
但是当我想要在实例化时就调用该属性时就还要调用一次init(),这未免太麻烦了,所以想要在实例化时就把该属性赋值,就像这样const test = await new Test()
。
这时找到了这篇文章,该作者提供了这样一段代码来实现了异步构造函数:
class MyClass {
constructor(timeout) {
this.completed = false
const init = (async () => {
await delay(timeout)
this.completed = true
delete this.then
return this
})()
this.then = init.then.bind(init)
}
}
(async function(){
const myclass = await new MyClass(1000);
})()
在解释这段代码前就得说说PromiseLike了:一个有then方法,且该方法接收resolve,reject两个参数的对象,就像这样:
const PromiseLike = {
then(resolve) {
resolve("i am PromiseLike");
},
};
(async function () {
const something = await PromiseLike;
console.log(something); // i am PromiseLike
})();
即使PromiseLike不是一个函数,它也会被await调用对象里的then方法并resolve出结果
现在回到刚才那段代码,注意到它最后的一段了吗
this.then = init.then.bind(init)
这句话把一个异步函数init
的then
给了实例,所以在调用new Myclass
后得到的实例上有着一个then方法,这个then方法又会被前面的await
解析,这时实质上解析的就是init
这个异步函数的then
而这个then
返回的是该类的实例化删除then
后的this
。
这样await new MyClass()
会等到init
的异步执行完毕才会返回值,这个返回值是init
的resolve。
总结一下:该方法其实仍然是同步实例化出了对象,但是await
会马上异步执行实例化里then
,然后返回出then
里删除了then
方法的this
,这样就做到了一句话进行实例化并初始化异步属性。
知道了这个原理后,最初的问题就解决了:
class Test {
constructor() {
const init = (async () => {
this.end = await delay(1000);
delete this.then;
return this;
})();
this.then = init.then.bind(init);
}
}
(async function () {
const test = await new Test();
console.log(test.end); // end
})();
该作者也提供了一个基类用来继承出异步构造函数,可以到原文去看看。
JS里的异步实例化的更多相关文章
- 理解 Node.js 里的 process.nextTick()
有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...
- js里的setTimeout和setInterval之后的页面是空白,阻塞浏览器的document对象,但是不阻塞script方法
js里的setTimeout和setInterval是否进程阻塞? 阻塞浏览器的document对象,但是不阻塞script方法 当你在setTimeout中使用document.write时是不行的 ...
- Log4.Net 在Winfrom、MVC、ashx程序里的使用,ashx程序里使用异步
最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...
- Log4.Net 在Winform、MVC、ashx程序里的使用,ashx程序里使用异步
最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...
- 【本周面试题】第2周 - js单线程和异步相关问题
硬性知识点考察: 为什么js是单线程的? 因为js设计最初是为了操作dom而生,如果是多线程的,当多个线程同时修改一个dom时就会产生冲突,所以设计成单线程,一次只能做一件事. 既然是单线程为什么要有 ...
- js多个异步请求
一,两个(或多个)js异步并发执行,怎么在两个AJax异步操作之后执行一个新的操作 原题来自 ES6 方法 1.Promise 包装异步ajax操作,2.定义async 函数,3.用await等待pr ...
- 为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?
https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...
- uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?
总结/朱季谦 先前有一次做uni-app的js接口对接时,遇到过这样的情况,在for循环里,调用一个异步请求时,返回来的值顺序是乱的,因此,在以下的代码里,push到数组里的值,每次的顺序可能都是不一 ...
- PHP中的__toString方法(实现JS里的链式操作)
_toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...
随机推荐
- opencv——图像直方图与反向投影
引言 在图像处理中,对于直方图这个概念,肯定不会陌生.但是其原理真的可以信手拈来吗? 本文篇幅有点长,在此列个目录,大家可以跳着看: 分析图像直方图的概念,以及opencv函数calcHist()对于 ...
- java基础——简易计算器的实现
计算器: import java.util.Scanner;public class CalculateDemo { public static void main(String[] args ...
- $(cd "$(dirname "$0")",pwd) 解析
xx.sh 文件内容如下: #!/bin/bash BIN_FOLDER=$(cd "$(dirname "$0")";pwd) echo $BIN_FOLDE ...
- xl release 安装
前提,该版本需要jdk-1.8以上(包括1.8),内存大于等于2G,磁盘最小空间2G,操作系统windows或者unix-family xl release是一个端到端的管道编排工具. 下载XL-re ...
- 056.Python前端Django模型ORM多表基本操作
一 准备工作 1.1 新建一个项目 root@darren-virtual-machine:~# cd /root/PycharmProjects/ root@darren-virtual-machi ...
- Scala 中 object、class 与 trait 的区别
Scala 中 object.class 与 trait 的区别 引言 当你刚入门 Scala,肯定会迫不及待想要编写自己的第一个 Scala 程序.如果你已经在交互模式下敲过 Scala 代码,想必 ...
- STM32 KEIL 下的 printf 函数
1 //加入以下代码,支持printf函数,而不需要选择use MicroLIB 2 #if 1 3 #pragma import(__use_no_semihosting) 4 //标准库需要的支持 ...
- 10.9 ping:测试主机之间网络的连通性
ping命令 可用于测试主机之间网络的连通性.执行ping命令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而可得知该主机运作正常. ping命令 ...
- [Django高级之批量插入数据、分页器组件]
[Django高级之批量插入数据.分页器组件] 批量插入数据 模板层models.py from django.db import models class Books(models.Model): ...
- linux文件内容列传行_行转列
================ 文件内容列传行_行转列 ================ 一.列转行 1.编辑测试文件 vi log.txt 16:23:00 8.2% 1773620k 16:2 ...