关于promise，你需要掌握这些

╰+攻爆jí腚メ 2023-01-04 15:57 190阅读 0赞

### 文章目录 ###

*   *  一、什么是promise
     *   *   *  1. 抽象表达
             *  2. 具体表达
     *  二、为什么要用promise
     *   *   *  1. 指定回调函数的方式更加灵活
             *  2. 支持链式调用，可以解决回调地狱问题
     *  三、promise的基本流程
     *  四、promise初体验
     *  五、实践练习1：fs读取文件
     *  六、实践练习2：AJAX请求
     *  七、封装fs读取文件操作
     *  八、util.promisify方法进行promise风格化
     *  九、promise封装ajax请求
     *  十、promise的API
     *   *   *  1. Promise 构造函数：Promise (excutor) \{\}
             *  2. Promise.prototype.then 方法：(onResolved, onRejected) => \{\}
             *  3. Promise.prototype.catch 方法: (onRejected) => \{\}
             *  4. Promise.resolve 方法: (value) => \{\}
             *  5. Promise.reject 方法: (reason) => \{\}
             *  6. Promise.all 方法: (promises) => \{\}
             *  7. Promise.race 方法: (promises) => \{\}
     *  十一、 promise 的几个关键问题
     *   *   *  1. 如何改变 promise 的状态
             *  2. 能否执行多个回调
             *  3. 改变状态与指定回调的顺序问题
             *  4. promise.then()返回的新 promise 的结果状态由什么决定?
             *  5. promise 如何串连多个操作任务?
             *  6. promise 异常传透
             *  7. 中断 promise 链
     *  十二、自定义（手写）promise
     *  十三、async 函数
     *   *   *  1. 如果返回值是一个非Promise类型的数据
             *  2. 如果返回的是一个Promise对象
             *  3. 抛出异常
     *  十四、await 表达式
     *  十五、async 与 await 结合
     *  十六、async与await结合发送AJAX

## 一、什么是promise ##

#### 1. 抽象表达 ####

*  promise是一门新的技术（ES6规范）
 *  promise是JS中进行异步编程的新解决方案（旧方案是单纯使用回调函数）

#### 2. 具体表达 ####

*  从语法上来说，promise是一个构造函数
 *  从功能上来说：promise对象用来封装一个异步操作并可以获取其成功 / 失败的结果值。

## 二、为什么要用promise ##

#### 1. 指定回调函数的方式更加灵活 ####

*  旧的：必须在启动异步任务前指定
 *  promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指多个）

#### 2. 支持链式调用，可以解决回调地狱问题 ####

*  什么是回调地狱？
    
     *  回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
 *  回调地狱的缺点？
    
     *  不便于阅读
     *  不便于异常处理
 *  解决方案？
    
     *  promise链式调用
 *  终极解决方案？
    
     *  async/await

## 三、promise的基本流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

## 四、promise初体验 ##

点击按钮, 1s 后显示是否中奖(30%概率中奖)，若中奖弹出“恭喜恭喜，您的中奖数字为”，若未中奖弹出“再接再厉，您的号码为”。

<div class="container">
        <h2 class="page-header">Promise 初体验</h2>
        <button class="btn btn-primary" id="btn">点击抽奖</button>
    </div>

//生成随机数
    function rand(m,n){ 
        return Math.ceil(Math.random() * (n-m+1)) + m-1;
    }
    
    //获取元素对象
    const btn = document.querySelector('#btn');
    //绑定单击事件
    btn.addEventListener('click', function(){ 
        //Promise 形式实现
        // resolve 成功 reject 失败
        const p = new Promise((resolve, reject) => { 
            setTimeout(() => { 
                //30% 1-100
                //获取从1 - 100的一个随机数
                let n = rand(1, 100);
                //判断
                if(n <= 30){ 
                    resolve(n); // 将 promise 对象的状态设置为 『成功』
                }else{ 
                    reject(n); // 将 promise 对象的状态设置为 『失败』
                }
            }, 1000);
        });
    
        console.log(p);
        //调用 then 方法
        // value 值 reason 理由
        p.then((value) => { 
            alert('恭喜恭喜, 您的中奖数字为 ' + value);
        }, (reason) => { 
            alert('再接再厉, 您的号码为 ' + reason);
        });
    
    });

![在这里插入图片描述][20210111110330493.png]  
![在这里插入图片描述][20210111110349946.png]

## 五、实践练习1：fs读取文件 ##

先引入 fs 模块：

const fs = require('fs');

回调函数形式：

fs.readFile('./resource/content.txt', (err, data) => { 
        // 如果出错 则抛出错误
        if(err)  throw err;
        //输出文件内容
        console.log(data.toString());
    });

![在这里插入图片描述][20210111111542825.png]  
Promise 形式：

![在这里插入图片描述][20210111111716339.png]

## 六、实践练习2：AJAX请求 ##

视频里给提供的接口地址：https://api.apiopen.top/getJoke

<div class="container">
        <h2 class="page-header">Promise 封装 AJAX 操作</h2>
        <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
    </div>

//获取元素对象
    const btn = document.querySelector('#btn');
    
    btn.addEventListener('click', function(){ 
        //创建 Promise
        const p = new Promise((resolve, reject) => { 
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化
            xhr.open('GET', 'https://api.apiopen.top/getJoke');
            //3. 发送
            xhr.send();
            //4. 处理响应结果
            xhr.onreadystatechange = function(){ 
                if(xhr.readyState === 4){ 
                    //判断响应状态码 2xx 
                    if(xhr.status >= 200 && xhr.status < 300){ 
                        //控制台输出响应体
                        resolve(xhr.response);
                    }else{ 
                        //控制台输出响应状态码
                        reject(xhr.status);
                    }
                }
            }
        });
        //调用then方法
        p.then(value=>{ 
            console.log(value);
        }, reason=>{ 
            console.warn(reason);
        });
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210111112450718.png]

## 七、封装fs读取文件操作 ##

封装一个函数 mineReadFile 读取文件内容

*  参数: path 文件路径
 *  返回: promise 对象

![在这里插入图片描述][20210111113050481.png]

## 八、util.promisify方法进行promise风格化 ##

//引入 util 模块
    const util = require('util');
    //引入 fs 模块
    const fs = require('fs');
    
    //返回一个新的函数
    let mineReadFile = util.promisify(fs.readFile);
    
    mineReadFile('./resource/content.txt').then(value=>{ 
        //输出文件内容
        console.log(value.toString());
    }, reason=>{ 
        console.log(reason);
    });

![在这里插入图片描述][20210111113841483.png]

## 九、promise封装ajax请求 ##

封装一个函数 sendAJAX 发送 GET AJAX 请求

*  参数 URL
 *  返回结果 Promise 对象

![在这里插入图片描述][20210111114436634.png]

## 十、promise的API ##

#### 1. Promise 构造函数：Promise (excutor) \{\} ####

(1) executor 函数：执行器 (resolve, reject) => \{\}  
(2) resolve 函数：内部定义成功时我们调用的函数 value => \{\}  
(3) reject 函数：内部定义失败时我们调用的函数 reason => \{\}

说明：executor 会在 Promise 内部立即同步调用，异步操作在执行器中执行

let p = new Promise((resolve, reject) => { 
        console.log(111);
    });
    
    console.log(222);

![在这里插入图片描述][20210111171020513.png]

#### 2. Promise.prototype.then 方法：(onResolved, onRejected) => \{\} ####

(1) onResolved 函数：成功的回调函数 (value) => \{\}  
(2) onRejected 函数：失败的回调函数 (reason) => \{\}

说明：指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象 。

#### 3. Promise.prototype.catch 方法: (onRejected) => \{\} ####

onRejected 函数: 失败的回调函数 (reason) => \{\}

说明：相当于-> then(undefined, onRejected)

let p = new Promise((resolve, reject) => { 
        //修改 promise 对象的状态
        reject('error');
    });
    
    //执行 catch 方法
    p.catch(reason => { 
        console.log(reason);
    });

![在这里插入图片描述][20210111171635161.png]

#### 4. Promise.resolve 方法: (value) => \{\} ####

value：成功的数据或 promise 对象  
说明：返回一个成功 / 失败的 promise 对象

*  如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象

let p1 = Promise.resolve(521);
    console.log(p1);

![在这里插入图片描述][20210111172243808.png]

*  如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果

let p2 = Promise.resolve(new Promise((resolve, reject) => { 
        reject('Error');
    }));
    p2.catch(reason => { 
        console.log(reason);
    })

![在这里插入图片描述][20210111172318557.png]

#### 5. Promise.reject 方法: (reason) => \{\} ####

reason：失败的原因  
说明：返回一个失败的 promise 对象

let p = Promise.reject(521);
    console.log(p);

![在这里插入图片描述][2021011117273028.png]

let p3 = Promise.reject(new Promise((resolve, reject) => { 
        resolve('OK');
    }));
    
    console.log(p3);

![在这里插入图片描述][20210111172800478.png]

#### 6. Promise.all 方法: (promises) => \{\} ####

promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败。

let p1 = new Promise((resolve, reject) => { 
        resolve('OK');
    })
    let p2 = Promise.resolve('Success');
    
    let p3 = Promise.resolve('Oh Yeah');
    
    const result = Promise.all([p1, p2, p3]);
    console.log(result);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

let p1 = new Promise((resolve, reject) => { 
        resolve('OK');
    })
    let p2 = Promise.reject('Error');
    let p3 = Promise.resolve('Oh Yeah');
    
    const result = Promise.all([p1, p2, p3]);
    console.log(result);

![在这里插入图片描述][20210111173525662.png]

#### 7. Promise.race 方法: (promises) => \{\} ####

promises: 包含 n 个 promise 的数组

说明：返回一个新的 promise，第一个完成的 promise 的结果状态就是最终的结果状态

let p1 = new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve('OK');
        }, 1000);
    })
    let p2 = Promise.resolve('Success');
    let p3 = Promise.resolve('Oh Yeah');
    
    //调用
    const result = Promise.race([p1, p2, p3]);
    
    console.log(result);

![在这里插入图片描述][20210111173949530.png]

## 十一、 promise 的几个关键问题 ##

#### 1. 如何改变 promise 的状态 ####

*  resolve 函数

resolve('ok'); // pending => fulfilled (resolved)
    console.log(p);

![在这里插入图片描述][2021011117453754.png]

*  reject 函数

reject("error");// pending => rejected 
    console.log(p);

![在这里插入图片描述][20210111174612581.png]

*  抛出错误

throw '出问题了';
    console.log(p);

![在这里插入图片描述][2021011117464638.png]

#### 2. 能否执行多个回调 ####

当 promise 改变为对应状态时都会调用

![在这里插入图片描述][20210111175000536.png]  
![在这里插入图片描述][20210111175010758.png]

#### 3. 改变状态与指定回调的顺序问题 ####

(1) 都有可能，正常情况下是先指定回调再改变状态，但也可以先改状态再指定回调

(2) 如何先改状态再指定回调

*  在执行器中直接调用 resolve()/reject()
 *  延迟更长时间才调用 then()

(3) 什么时候才能得到数据?

*  如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据
 *  如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据

![在这里插入图片描述][20210111175759633.png]

![在这里插入图片描述][20210111175902771.png]

#### 4. promise.then()返回的新 promise 的结果状态由什么决定? ####

(1) 简单表达：由 then()指定的回调函数执行的结果决定

(2) 详细表达：

*  如果抛出异常，新 promise 变为 rejected，reason 为抛出的异常

![在这里插入图片描述][20210111180625400.png]

*  如果返回的是非promise的任意值，新promise变为resolved，value为返回的值

![在这里插入图片描述][20210111180752380.png]

*  如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

![在这里插入图片描述][2021011118103538.png]

![在这里插入图片描述][20210111180957128.png]

#### 5. promise 如何串连多个操作任务? ####

(1) promise 的 then()返回一个新的 promise，可以看成 then()的链式调用

(2) 通过 then 的链式调用串连多个同步/异步任务

![在这里插入图片描述][2021011118185021.png]

#### 6. promise 异常传透 ####

(1) 当使用 promise 的 then 链式调用时，可以在最后指定失败的回调

![在这里插入图片描述][20210111182435774.png]

(2) 前面任何操作出了异常，都会传到最后失败的回调中处理

![在这里插入图片描述][20210111182945713.png]

![在这里插入图片描述][20210111183038410.png]

#### 7. 中断 promise 链 ####

*  当使用 promise 的 then 链式调用时，在中间中断，不再调用后面的回调函数
 *  办法：在回调函数中返回一个 pendding 状态的 promise 对象

![在这里插入图片描述][20210111184345205.png]

## 十二、自定义（手写）promise ##

class Promise{ 
        //构造方法
        constructor(executor){ 
            //添加属性
            this.PromiseState = 'pending';
            this.PromiseResult = null;
            //声明属性
            this.callbacks = [];
            //保存实例对象的 this 的值
            const self = this;// self _this that
            //resolve 函数
            function resolve(data){ 
                //判断状态
                if(self.PromiseState !== 'pending') return;
                //1. 修改对象的状态 (promiseState)
                self.PromiseState = 'fulfilled';// resolved
                //2. 设置对象结果值 (promiseResult)
                self.PromiseResult = data;
                //调用成功的回调函数
                setTimeout(() => { 
                    self.callbacks.forEach(item => { 
                        item.onResolved(data);
                    });
                });
            }
            //reject 函数
            function reject(data){ 
                //判断状态
                if(self.PromiseState !== 'pending') return;
                //1. 修改对象的状态 (promiseState)
                self.PromiseState = 'rejected';// 
                //2. 设置对象结果值 (promiseResult)
                self.PromiseResult = data;
                //执行失败的回调
                setTimeout(() => { 
                    self.callbacks.forEach(item => { 
                        item.onRejected(data);
                    });
                });
            }
            try{ 
                //同步调用『执行器函数』
                executor(resolve, reject);
            }catch(e){ 
                //修改 promise 对象状态为『失败』
                reject(e);
            }
        }
    
        //then 方法封装
        then(onResolved,onRejected){ 
            const self = this;
            //判断回调函数参数
            if(typeof onRejected !== 'function'){ 
                onRejected = reason => { 
                    throw reason;
                }
            }
            if(typeof onResolved !== 'function'){ 
                onResolved = value => value;
                //value => { return value};
            }
            return new Promise((resolve, reject) => { 
                //封装函数
                function callback(type){ 
                    try{ 
                        //获取回调函数的执行结果
                        let result = type(self.PromiseResult);
                        //判断
                        if(result instanceof Promise){ 
                            //如果是 Promise 类型的对象
                            result.then(v => { 
                                resolve(v);
                            }, r=>{ 
                                reject(r);
                            })
                        }else{ 
                            //结果的对象状态为『成功』
                            resolve(result);
                        }
                    }catch(e){ 
                        reject(e);
                    }
                }
                //调用回调函数 PromiseState
                if(this.PromiseState === 'fulfilled'){ 
                    setTimeout(() => { 
                        callback(onResolved);
                    });
                }
                if(this.PromiseState === 'rejected'){ 
                    setTimeout(() => { 
                        callback(onRejected);
                    });
                }
                //判断 pending 状态
                if(this.PromiseState === 'pending'){ 
                    //保存回调函数
                    this.callbacks.push({ 
                        onResolved: function(){ 
                            callback(onResolved);
                        },
                        onRejected: function(){ 
                            callback(onRejected);
                        }
                    });
                }
            })
        }
    
        //catch 方法
        catch(onRejected){ 
            return this.then(undefined, onRejected);
        }
    
        //添加 resolve 方法
        static resolve(value){ 
            //返回promise对象
            return new Promise((resolve, reject) => { 
                if(value instanceof Promise){ 
                    value.then(v=>{ 
                        resolve(v);
                    }, r=>{ 
                        reject(r);
                    })
                }else{ 
                    //状态设置为成功
                    resolve(value);
                }
            });
        }
    
        //添加 reject 方法
        static reject(reason){ 
            return new Promise((resolve, reject)=>{ 
                reject(reason);
            });
        }
    
        //添加 all 方法
        static all(promises){ 
            //返回结果为promise对象
            return new Promise((resolve, reject) => { 
                //声明变量
                let count = 0;
                let arr = [];
                //遍历
                for(let i=0;i<promises.length;i++){ 
                    //
                    promises[i].then(v => { 
                        //得知对象的状态是成功
                        //每个promise对象 都成功
                        count++;
                        //将当前promise对象成功的结果 存入到数组中
                        arr[i] = v;
                        //判断
                        if(count === promises.length){ 
                            //修改状态
                            resolve(arr);
                        }
                    }, r => { 
                        reject(r);
                    });
                }
            });
        }
    
        //添加 race 方法
        static race (promises){ 
            return new Promise((resolve, reject) => { 
                for(let i=0;i<promises.length;i++){ 
                    promises[i].then(v => { 
                        //修改返回对象的状态为 『成功』
                        resolve(v);
                    },r=>{ 
                        //修改返回对象的状态为 『失败』
                        reject(r);
                    })
                }
            });
        }
    }

## 十三、async 函数 ##

*  函数的返回值为 promise 对象
 *  promise 对象的结果由 async 函数执行的返回值决定

#### 1. 如果返回值是一个非Promise类型的数据 ####

async function main(){ 
        //1. 如果返回值是一个非Promise类型的数据
        return 521;
    }
    let result = main();
    console.log(result);

![在这里插入图片描述][2021011119041442.png]

#### 2. 如果返回的是一个Promise对象 ####

async function main(){ 
        //2. 如果返回的是一个Promise对象
        return new Promise((resolve, reject) => { 
            // resolve('OK');
            reject('Error');
        });
    }
    let result = main();
    console.log(result);

![在这里插入图片描述][20210111190532177.png]

#### 3. 抛出异常 ####

async function main(){    
        //3. 抛出异常
        throw "Oh NO";
    }
    let result = main();
    console.log(result);

![在这里插入图片描述][20210111190608810.png]

## 十四、await 表达式 ##

1.  await 右侧的表达式一般为 promise 对象，但也可以是其它的值
2.  如果表达式是 promise 对象，await 返回的是 promise 成功的值
3.  如果表达式是其它值，直接将此值作为 await 的返回值

**注意：**

*  await 必须写在 async 函数中，但 async 函数中可以没有 await
 *  如果 await 的 promise 失败了，就会抛出异常，需要通过 try…catch 捕获处理

右侧为promise的情况：

async function main(){ 
        let p = new Promise((resolve, reject) => { 
            resolve('OK');
        })
        //1. 右侧为promise的情况
        let res = await p;
        console.log(res);   
    }
    
    main();

![在这里插入图片描述][20210111191532353.png]

右侧为其他类型的数据：

async function main(){ 
        let p = new Promise((resolve, reject) => { 
            resolve('OK');
        })
        //2. 右侧为其他类型的数据
        let res2 = await 20; 
        console.log(res2);
    }
    
    main();

![在这里插入图片描述][2021011119145032.png]

如果promise是失败的状态：

async function main(){ 
        let p = new Promise((resolve, reject) => { 
            reject('Error');
        })
        //3. 如果promise是失败的状态
        try{ 
            let res3 = await p;
        }catch(e){ 
            console.log(e);
        }
    }
    main();

![在这里插入图片描述][20210111191300390.png]

## 十五、async 与 await 结合 ##

![在这里插入图片描述][20210111191939553.png]  
如果找不到文件报错，如加个 x ：  
![在这里插入图片描述][20210111192023838.png]  
结果：  
![在这里插入图片描述][2021011119204891.png]

## 十六、async与await结合发送AJAX ##

<button id="btn">点击获取段子</button>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221119/8027fb238f754966a2e3f6688859d53e.png
[20210111110330493.png]: https://img-blog.csdnimg.cn/20210111110330493.png
[20210111110349946.png]: https://img-blog.csdnimg.cn/20210111110349946.png
[20210111111542825.png]: https://img-blog.csdnimg.cn/20210111111542825.png
[20210111111716339.png]: https://img-blog.csdnimg.cn/20210111111716339.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210111112429909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210111112450718.png]: https://img-blog.csdnimg.cn/20210111112450718.png
[20210111113050481.png]: https://img-blog.csdnimg.cn/20210111113050481.png
[20210111113841483.png]: https://img-blog.csdnimg.cn/20210111113841483.png
[20210111114436634.png]: https://img-blog.csdnimg.cn/20210111114436634.png
[20210111171020513.png]: https://img-blog.csdnimg.cn/20210111171020513.png
[20210111171635161.png]: https://img-blog.csdnimg.cn/20210111171635161.png
[20210111172243808.png]: https://img-blog.csdnimg.cn/20210111172243808.png
[20210111172318557.png]: https://img-blog.csdnimg.cn/20210111172318557.png
[2021011117273028.png]: https://img-blog.csdnimg.cn/2021011117273028.png
[20210111172800478.png]: https://img-blog.csdnimg.cn/20210111172800478.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210111173219223.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210111173525662.png]: https://img-blog.csdnimg.cn/20210111173525662.png
[20210111173949530.png]: https://img-blog.csdnimg.cn/20210111173949530.png
[2021011117453754.png]: https://img-blog.csdnimg.cn/2021011117453754.png
[20210111174612581.png]: https://img-blog.csdnimg.cn/20210111174612581.png
[2021011117464638.png]: https://img-blog.csdnimg.cn/2021011117464638.png
[20210111175000536.png]: https://img-blog.csdnimg.cn/20210111175000536.png
[20210111175010758.png]: https://img-blog.csdnimg.cn/20210111175010758.png
[20210111175759633.png]: https://img-blog.csdnimg.cn/20210111175759633.png
[20210111175902771.png]: https://img-blog.csdnimg.cn/20210111175902771.png
[20210111180625400.png]: https://img-blog.csdnimg.cn/20210111180625400.png
[20210111180752380.png]: https://img-blog.csdnimg.cn/20210111180752380.png
[2021011118103538.png]: https://img-blog.csdnimg.cn/2021011118103538.png
[20210111180957128.png]: https://img-blog.csdnimg.cn/20210111180957128.png
[2021011118185021.png]: https://img-blog.csdnimg.cn/2021011118185021.png
[20210111182435774.png]: https://img-blog.csdnimg.cn/20210111182435774.png
[20210111182945713.png]: https://img-blog.csdnimg.cn/20210111182945713.png
[20210111183038410.png]: https://img-blog.csdnimg.cn/20210111183038410.png
[20210111184345205.png]: https://img-blog.csdnimg.cn/20210111184345205.png
[2021011119041442.png]: https://img-blog.csdnimg.cn/2021011119041442.png
[20210111190532177.png]: https://img-blog.csdnimg.cn/20210111190532177.png
[20210111190608810.png]: https://img-blog.csdnimg.cn/20210111190608810.png
[20210111191532353.png]: https://img-blog.csdnimg.cn/20210111191532353.png
[2021011119145032.png]: https://img-blog.csdnimg.cn/2021011119145032.png
[20210111191300390.png]: https://img-blog.csdnimg.cn/20210111191300390.png
[20210111191939553.png]: https://img-blog.csdnimg.cn/20210111191939553.png
[20210111192023838.png]: https://img-blog.csdnimg.cn/20210111192023838.png
[2021011119204891.png]: https://img-blog.csdnimg.cn/2021011119204891.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021011119241485.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70