ES6 —— 3、async-await、微任务和宏任务、class、proxy（代理）

柔光的暖阳◎ 2022-10-10 11:16 192阅读 0赞

#  重写留言板2： #

index2.js

index3.js

promise.js

复制4小题代码

//Promise对象实现Ajax封装
    const getJSON = function (url, type, data = null) {
      const promise = new Promise(function (resolve, reject) {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.open(type, url);
        if (type == 'get') {
          xmlHttp.send();
        } else {
          xmlHttp.setRequestHeader("Content-Type", "application/json");
          xmlHttp.send(JSON.stringify(data));
        };
        xmlHttp.responseType = "json";
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState !== 4) return;
          if (xmlHttp.status === 200) {
            resolve(xmlHttp.response);	//成功后，可以返回到then函数下
          } else {
            reject(new Error(xmlHttp.statusText));
          }
        };
      });
      return promise;
    };

server.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

# 重写留言板3：（串行、并行） #

html

![20210628003052895.png][]

![20210628003056417.png][]

用上面留言板继续

promise.js

server.js

//测试接口
    app.get('/get1',function(req,res){
        var data ={
            code:'200',
            msg:'get1',
            result:{id:1}
        }
        res.send(JSON.stringify(data));
    })
    app.get('/get2',function(req,res){
        var data ={
            code:'200',
            msg:'get2'
        }
        res.send(JSON.stringify(data));
    })

index.js

复制index3.js  
修改：

>     var obj = {
>         init: function () {
>             this.bind();
>         },
>         url: 'http://localhost:3000',
>     $: name => document.querySelector(name),
>     ===================================================================================
>         bind: function () {
>             console.log(this);
>             this.$(".submit").onclick = () => {
>                 console.log(this);  //这里的this指的就是obj 箭头函数中this的指向不会发生变化
>                 let [_name, _msg] = [this.$(".name").value, this.$(".message").value];
>                 if (_name == '' || _msg == '') {
>                     alert("请输入信息");
>                 } else {
>                     this.submitData(_name, _msg);
>                     this.$(".name").value = '';
>                     this.$(".message").value = '';
>                 }
>             },
>             //链式写法
>             this.$(".queryThen").onclick = () => { this.queryThen() };
>             //并行写法
>             this.$(".queryWhen").onclick = () => { this.queryWhen() };
>     },
>     ===================================================================================
>         submitData: function (_name, _msg) {
>           getJSON(`${this.url}/submit_message`, "post", { name: _name, message: _msg })
>                 .then(res => {
>                     console.log(res);
>                     let { code } = res;
>                     if (code == '200') {
>                         this.getData();
>                     }
>                 }).catch(err => {
>                     console.log(err)
>                 })
>             // getJSON("http:localhost:3000/map/add1","get")
>             // .then(function(res){
>             //     console.log(res);
>             //     return getJSON("http:localhost:3000/add",'post', {id:res.result.id,name: '123', message: '123'})
>             // })
>             // .then(function(res){
>             //         console.log(res)
>             // },function(){
>             // })
>     },
>     ===================================================================================
>         getData: function (res) {
>             getJSON(`${this.url}/get_message`, "get")
>                 .then(res => {
>                     console.log(res);
>                     let { code, result } = res;
>                     if (code == '200') {
>                         let str = "";
>                         for (let v of result) {
>                             str += `<li class="list-group-item">${v.name}<span>说：</span>${v.message}</li>`
>                         };
>                         this.$(".messageList").innerHTML = str;
>                     }
>                 }).catch(err => {
>                     console.log(err)
>                 })
>     },
>     ===================================================================================
>         queryThen: function () {  //串行
>             //   getJSON(`${this.url}/get1`,"get")
>             //     .then(res=>{
>             //         console.log(res);
>             //         return getJSON(`${this.url}/get2?id=${res.result.id}`,"get")
>             //     },err=>{
>             //     }).then(res=>{
>             //         console.log(res)
>             //     },function(){
>             //     })
>             var _this = this;
>             async function f() {
>                 var a1 = await getJSON(`${_this.url}/get1`, "get");
>                 //console.log(a1)
>                 var a2 = await getJSON(`${_this.url}/get2?id=${a1.result.id}`, "get");
>                 //console.log(a2)
>             }
>             f();
>     },
>     ===================================================================================
>         queryWhen: function () {  //并行
>             Promise.all([
>                 getJSON(`${this.url}/get1`, "get"),
>                 getJSON(`${this.url}/get2`, "get")
>             ]).then(([d1, d2]) => {
>                 console.log(d1, d2)
>             })
> 
> ![20210628003134271.png][]
> 
>     ===================================================================================
>             // var p1 = new Promise((resolve,reject)=>{
>             //     setTimeout(()=>{
>             //         resolve('p1')
>             //     },1000)
>             // });
>             // var p2 = new Promise((resolve,reject)=>{
>             //     setTimeout(()=>{
>             //         resolve('p2')
>             //     },5000)
>             // });
>             // Promise.all([p1,p2]).then(([d1,d2])=>{
>             //     console.log(d1,d2)
>             // })
> 
> ![20210628003146139.png][]
> 
>     // var p3 = new Promise((resolve,reject)=>{
>             //     setTimeout(()=>{
>             //         resolve('p3')
>             //     },1000)
>             // });
>             // var p4 = new Promise((resolve,reject)=>{
>             //     setTimeout(()=>{
>             //         resolve('p4')
>             //     },5000)
>             // });
>             // Promise.race([p3,p4]).then(d=>{   //返回的是请求快的，
>             //     console.log(d)
>             // })
> 
> ![2021062800320064.png][]
> 
>     ===================================================================================
>         }
>     };
>     
>     window.onload = function () {
>         obj.init();
>     }

# （12）async-await #

经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了

async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅，当然也增强了代码的可读性

简单来说：async-await 是建立在 promise（承诺）机制之上的，并不能取代其地位

具体理解：

## 1.async ##

>     async function timeout() {
>             return 'hello world'
>         }
>         timeout();	//为什么没有执行'hello world'
>     -----------------------------------------------------------------------------------
>         async function timeout() {
>             return 'hello world'
>         }
>         console.log(timeout());	//Promise {<resolved>: "hello world"}
> 
> ![20210628004153721.png][]

async 函数返回的是一个promise 对象，如果要获取到promise 返回值，应该用then 方法

>     async function fn() {
>             return 100;
>         }
>         console.log(fn()); 	//Promise {<resolved>: 100}
>     
>         let f = fn();
>         f.then(function (d) {
>             console.log(d) 	//100
>         })
> 
> ![20210628004211265.png][] //同步—>微任务—>宏任务
> 
> ![20210628004244931.png][]//同步—>微任务—>宏任务

## 2.await ##

await操作符用于等待一个Promise对象，它只能在异步函数async function内部使用

**返回值：**

返回promise对象的处理结果，如果待等的不是promise对象，则返回该值本身

如果一个promise被传递给一个await操作符，await将等待promise正常处理完成并返回其处理结果

>     function f2() {
>             console.log(4)
>         }
>         async function f() {
>             await f2();	//阻塞（await后面的都阻塞，阻塞console.log(2)）
>             console.log(2)
>         }
>         f();
>         console.log(3);
> 
> ![20210628004313194.png][]

正常情况下，await命令后面是一个promise对象，它也可以是其它值，如字符串，布尔值，数值以及普通函数。

>     console.log(2)
>         async function fn() {
>             console.log(3)
>             await 100;	//阻塞（await后面的都阻塞，阻塞console.log(1)）
>             console.log(1)
>         }
>         fn()
>         console.log(4)
> 
> ![20210628004327435.png][]

await命令后面是一个promise对象

>     function p() {
>             return new Promise(resolve => {
>                 resolve();
>                 console.log(1)
>             });
>         };
>         async function fn() {
>             console.log(2)
>             await p();
>             console.log(3)
>         }
>         fn()
> 
> ![20210628004341715.png][]

**雅倩（网友）：**await 可以理解为把异步的then转为同步的写法

# （13）微任务和宏任务 #

## 1.微任务与宏任务的区别 ##

> 就像去银行办业务一样，先要取号进行排号。
> 
> 一般上边都会印着类似：“您的号码为XX，前边还有XX人。”之类的字样。
> 
> 由于柜员只能处理一个来办理业务的客户，这时每一个来办理业务的人就可以认为是银行柜员的一个宏
> 
> 任务来存在的；
> 
> 当柜员处理完当前客户的问题以后，选择接待下一位，广播报号，也就是下一个宏任务的开始。
> 
> 所以多个宏任务合在一起就可以认为有一个任务队列在这，里边是当前银行中所有排号的客户。
> 
> 如果叫到你的时候你不在，那么你当前的号牌就作废了，柜员会选择直接跳过进行下一个客户的业务处
> 
> 理，等你回来以后还需要重新取号，而且一个宏任务在执行的过程中，是可以添加一些微任务的，就像在柜台办理业务，你前边的一位老大爷可能在存款，结果在存款这个业务办理完以后，柜员会问老大爷还有没有其他需要办理的业务，这时老大爷想了一下：“想选择稳一些的理财”，这时候柜员肯定不能告诉老大爷说：“您再上后边取个号去，重新排队”。
> 
> 所以本来快轮到你来办理业务，会因为老大爷临时添加的“理财业务”而往后推。
> 
> 也许老大爷在办完理财以后还想 再办一个信用卡？或者 再买点儿纪念币？
> 
> 无论是什么需求，只要是柜员能够帮她办理的，都会在处理你的业务之前来做这些事情，这些都可以认
> 
> 为是微任务。
> 
> 在当前的微任务没有执行完成时，是不会执行下一个宏任务的。

![20210628004451431.png][]//同步—>微任务—>宏任务

## 2.promise是同步还是异步？ ##

Promise是ES6提出的解决异步编程导致陷入回调地狱问题的，那么Promise是同步的还是异步的？可以 确定的是，Promise本身是同步

>     console.log(1)
>         let a = new Promise((res, rej) => {
>             console.log(2);
>         });
>             console.log(3);
>         let b = new Promise((res, rej) => {
>             console.log(4);
>         });
>         console.log(5);
> 
> ![20210628004524858.png][]

**Promise****本身是同步**

**then****方法和catch方法是异步**

>     let a = new Promise((res, rej) => {	//同步
>             console.log(1);
>             res(2) 
>         });
>         a.then((res) => { 	//微任务,异步
>             console.log(res);
>         });
>         console.log(3); 	//同步
> 
> ![20210628004549634.png][]

扩展实例

>     console.log(1)
>         let a = new Promise((res, rej) => {
>             res();
>             console.log(2);
>         });
>         a.then(() => {
>             console.log(3)
>         })
>         console.log(4);
>         let b = new Promise((res, rej) => {
>             res();
>             console.log(5);
>         });
>         b.then(() => {
>             console.log(6)
>         })
>         console.log(7);
> 
> ![20210628004611648.png][]
> 
> ![20210628004614875.png][]//同步—>微任务—>宏任务
> 
> ![20210628004622148.png][]

# （14）class #

## 1.class的基本用法 ##

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到

> **ES5**中定义类
> 
>     function AA (x, y) {
>             this.x = x;
>             this.y = y;
>         }
>         AA.prototype.toString = function () {
>             return this.x
>         };
>         var p = new AA (2, 4);

> **ES6**
> 
>     class AA {
>             constructor(x, y) {
>                 this.x = x;
>                 this.y = y;
>             }
>             toString() {
>                 return this.x;
>             }
>         }
>         var p = new AA (3, 5);

上面代码定义了一个“类”，可以看到里面有一个构造函数方法，而 this 关键字则代表实例对象。也就是说，ES5 的构造函数 Point，对应 ES6 的 Point 类的构造方法。

Point 类除了构造方法，还定义了一个 toString 方法。注意，定义“类”的方法的时候，前面不需要加

上 function 这个关键字，直接把函数定义放进去了就可以了。另外，方法之间不需要逗号分隔，加了

会报错。

**ES6** 的类，完全可以看作构造函数的另一种写法

class AA {
            // ...
        }
        typeof AA 						// "function"
        AA === AA.prototype.constructor	// true

## 2.constructor构造函数方法 ##

constructor 方法是类的默认方法，通过 new 命令生成对象实例时，自动调用该方法。一个类必须有 constructor 方法，如果没有显式定义，一个空的 constructor 方法会被默认添加。

class AA { }
        //等同于
        class AA {
            constructor() { }
        }

## 3.类的实例 ##

生成类的实例的写法，与 ES5 完全一样，也是使用 new 命令。

class AA {
            // ...
        }
        
        var point = AA (2, 3); 		//报错
        var point = new AA (2, 3); 	//正确

## 4.class的继承 ##

Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class AA {
            constructor() {
                this.x = 'x';
                this.y = 'y';
            }
            toString() {
                return this.x;
            }
        }
        class ColorPoint extends AA {
            constructor() {
                super();
            }
        }
        var c = new ColorPoint();
        c.x 				//'x'
        c.toString() 	//'x'

> 上面代码定义了一个 ColorPoint 类，该类通过 extends 关键字，继承了 Point 类的所有属性和方法constructor 方法和 toString 方法之中，都出现了 super 关键字，它在这里表示父类的构造函数，用来新建父类的 this 对象
> 
> 子类必须在 constructor 方法中调用 super 方法，否则新建实例时会报错。这是因为子类自己的 this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用 super 方法，子类就得不到 this 对象。

## 5.super关键字 ##

![20210628004930657.png][]

super 这个关键字，既可以当作函数使用，也可以当作对象使用

super 作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次 super 函数。

class A { }
        class B extends A {
            constructor() {
                super();
            }
        }
        // 子类B的构造函数之中的super() ，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错

注意， super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，即 super 内部的 this 指的 是 B 的实例，

**因此 super() 在这里相当于 A.prototype.constructor.call(this)**

super 作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
            p() {
                return 2;
            }
        }
        class B extends A {
            constructor() {
                super();
                console.log(super.p()); // 2
            }
        }
        let b = new B();

# （15）proxy（代理） #

proxy 在目标对象的外层搭建了一层拦截

var proxy = new Proxy(target目标, handler处理);

## 1.基本用法 ##

new Proxy() 表示生成一个Proxy 实例，target 参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为

>     var target = {	//target表示所要拦截的目标对象
>             name: 'jindu'
>         };
>         var handler = {	//handler表示定制拦截行为
>             get: function (target, key) {
>                 console.log(`${key} 被读取`);
>                 return target[key];
>             },
>             set: function (target, key, value) {
>                 console.log(`${key} 被设置为 ${value}`);
>                 target[key] = value;
>             }
>         }
>         var a = new Proxy(target, handler);
>         a.name; 			//执行的是get方法
>         a.name = 'abc';	//如果赋值，执行的是set方法
>         console.log(target.name);		//abc
> 
> ![20210628005055382.png][]
> 
> ![20210628005057699.png][]    //这样的话，两个都会触发

a读取属性的值时，实际上执行的是 handler.get：在控制台输出信息，并且读取被代理对象 target 的属性。

在 a 设置属性值时，实际上执行的是 handler.set：在控制台输出信息，并且设置被代理对象 target 的属性的值

## 2.Proxy的作用 ##

对于代理模式 Proxy 的作用主要体现在三个方面:

*  拦截和监视外部对对象的访问
 *  降低函数或类的复杂度
 *  在复杂操作前对操作进行校验或对所需资源进行管理

## 3.Proxy所能代理的范围--handler ##

实际上 handler 本身就是 ES6 所新设计的一个对象.它的作用就是用来 自定义代理对象的各种可代理操 作 。它本身一共有 13 中方法,每种方法都可以代理一种操作.其 13 种方法如下

get(target, key, receiver)
    // 拦截对象属性的读取，比如proxy.foo和proxy['foo']。
    
    set(target, key, value, receiver)
    // 拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
    
    has(target, key)
    // 拦截key in proxy的操作，返回一个布尔值。
    
    deleteProperty(target, key)
    // 拦截delete proxy[key]的操作，返回一个布尔值。
    
    ownKeys(target)
    // 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、
    
    Object.keys(proxy)  //for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而
    
    Object.keys()   //的返回结果仅包括目标对象自身的可遍历属性。
    
    getOwnPropertyDescriptor(target, key)	
    //拦截Object.getOwnPropertyDescriptor(proxy, key)，返回属性的描述对象。
    
    defineProperty(target, key, propDesc)
    // 拦截Object.defineProperty(proxy, key, propDesc）、
    
    Object.defineProperties(proxy, propDescs) //返回一个布尔值。
    
    preventExtensions(target)
    // 拦截Object.preventExtensions(proxy)，返回一个布尔值。
    
    getPrototypeOf(target)
    // 拦截Object.getPrototypeOf(proxy)，返回一个对象。
    
    isExtensible(target)
    // 拦截Object.isExtensible(proxy)，返回一个布尔值。
    
    setPrototypeOf(target, proto)
    // 拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
    
    apply(target, object, args)
    // 拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)
    
    proxy.apply(...)
    construct(target, args)
    // 拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

## 4.应用 ##

### （1）实现私有变量，想获取aaa，由于添加了拦截获取的只能是18 ###

**特点：**利用startsWith方法，变量变为私有，不能被修改

>     var AA = {
>             name: 'aaa',
>             _age: 30
>         }
>         var BB = {
>             get: function (target, key) {
>                 if (key.startsWith('_')) {
>                     console.log('私有变量age不能被访问')
>                     return 18
>                 }
>                 return target[key];
>             },
>             set: function (target, key, value) {
>                 if (key.startsWith('_')) {
>                     console.log('私有变量age不能被修改')
>                     return 18
>                 }
>                 target[key] = value;
>             }
>         }
>         var a = new Proxy(AA, BB);
>         a._age 		
>         a._age = 20
> 
> ![20210628005312420.png][]
> 
> ![20210628005314978.png][]

### （2）抽离校验模块 ###

>     var AA = {
>             count: 0,
>             id: 1234,
>             total: 14
>         };
>         var BB = {
>             set(target, key, value, proxy) {
>                 if (typeof value !== 'number') {
>                     throw Error("只能输入数字");
>                 }
>                 return Reflect反射.set(target, key, value, proxy);
>             }
>         };
>         var p = new Proxy(AA, BB);
> 
>     p.count = "123"; //抛出错误，因为 "123" 不是数值型![20210628005340262.png][]
> 
>     p.count = 333;   //赋值成功![20210628005340261.png][]

## 5.Object.defineProperty()与Proxy的异同 ##

> Object.defineProperty()
> 
> 优点：可以更好的拦截
> 
> 缺点：无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应(虽说对常用的方法进行了处理，但然存在局限性)；只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历（数组遍历之类会出问题）

> proxy
> 
> 优点：可以劫持整个对象，并返回一个新对象；有13种劫持操作
> 
> 缺点：兼容性不好

>     var Obj = {}
>         Object.defineProperty(Obj, 'a', {
>             get: function () {
>                 console.log('get');
>                 return v
>             },
>             set: function (val) {
>                 console.log('set');
>                 v = val
>             }
>         });
>         Obj.a = [] 		// set
>         Obj.a.push('1') 	// get（缺点,没存进去）下标问题
>         Obj.a[0] = 1 	// get（缺点,没存进去）
>         Obj.a.pop(1) 	// get（缺点,没存进去）
>         Obj.a = [1, 2, 3] // set
>     ===================================================================================
>         var arr = [];
>         var p = new Proxy(arr, {
>             get: (target, key) => {
>                 console.log('get')
>                 return key in target ? target[key] : undefined
>             },
>             set: (target, key, value) => {
>                 console.log('set')
>                 target[key] = value
>                 return true
>             }
>         })
>         p.push(1);
> 
> ![20210628005445381.png][]
> 
>     //get  获取数组arr的push方法
>         //get  获取数组arr的length属性
>         //set（触发两次）  设置arr[0] = 1
>         //set  设置数组arr长度为1
>     
>         p[0] = 1	//set
>         p[0] = 2	//set

<body>
          <input type="text" id="textInput">
          输入：<span id="textSpan"></span>
    
          <script>
                var obj = {},
                      textInput = document.querySelector("#textInput"),  //输入
                      textSpan = document.querySelector("#textSpan");    //输出
    
                Object.defineProperty(obj, 'name', {
                      get: function () {
                            console.log('get');
                            return v
                      },
                      set: function (val) {
                            console.log('set');
                            v = val
                      }
                });
                textInput.onkeyup按键按下时 = function () {
                      obj.name = textInput.value;
                      textSpan.innerHTML = obj.name;
                }
          </script>
    </body>

![20210628005511142.png][]

![20210628005514535.png][]

![20210628005516506.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/575d3a38b322446c9c727999c41c378a.png
[20210628003052895.png]: /images/20221005/d25573e23d4744b99be0421ccb6306ee.png
[20210628003056417.png]: /images/20221005/ca6e51c73df2409bb6a95404638e9ea9.png
[20210628003134271.png]: /images/20221005/71492af39ad7444a8862b2c89ded8a1c.png
[20210628003146139.png]: /images/20221005/e716eef5fec44709bf648f13603c8930.png
[2021062800320064.png]: /images/20221005/4b9c942a9d6c46a9a8f01779528e9ca0.png
[20210628004153721.png]: /images/20221005/6f3c34b10b0a49358d8d7653abd283ca.png
[20210628004211265.png]: /images/20221005/1bcf6e2a42a54f1596bf9cbb557d8b1f.png
[20210628004244931.png]: /images/20221005/2dfe647b58834594b6a87922cb9b60d5.png
[20210628004313194.png]: /images/20221005/64296c5ae28e493fbffc3a701c3b61ad.png
[20210628004327435.png]: /images/20221005/05ef9e75e8e8489a9352ef7652b6082b.png
[20210628004341715.png]: /images/20221005/91ac9c45089b46b6b2fbe2d841256385.png
[20210628004451431.png]: /images/20221005/018380299e2544199b70ba0a07ede078.png
[20210628004524858.png]: /images/20221005/a598c7f3fb0a487a9811b4e5180bf2df.png
[20210628004549634.png]: /images/20221005/4c6ff0aa46e44bdf9fb0b62aa5017dc0.png
[20210628004611648.png]: /images/20221005/e8361910f8774d1c8b0f3f2a90f7ec76.png
[20210628004614875.png]: /images/20221005/d9107353407940d6a4d16b6f6b2f4860.png
[20210628004622148.png]: /images/20221005/a36ca5d2a3c54517be95a664871c4a6c.png
[20210628004930657.png]: /images/20221005/61f3ddccd71f44b48a079cee98751ec5.png
[20210628005055382.png]: /images/20221005/86d34ba75ee5414ba7270819bf6031b5.png
[20210628005057699.png]: /images/20221005/fed22493447e4c77bde751c7c65635a3.png
[20210628005312420.png]: /images/20221005/6c9c78b6ce364155b40112097cc9bc61.png
[20210628005314978.png]: /images/20221005/58c5c6c93d0548928c659fe8304720e5.png
[20210628005340262.png]: /images/20221005/ce22856db5874bd1b83da3d5769b490c.png
[20210628005340261.png]: /images/20221005/12501049ec434176a3f164a1aeff4114.png
[20210628005445381.png]: /images/20221005/a61a9ffd7db04b97925176928e9195d6.png
[20210628005511142.png]: /images/20221005/ecad6391ff4d4fa5a714a9291864dcca.png
[20210628005514535.png]: /images/20221005/ce25f49afb954d9dbb308b95b4b71954.png
[20210628005516506.png]: /images/20221005/ea8a35f1b8774b9684d16e824fd72ed9.png