手写promise/image对象

new image()-----声明一个image对象
onload-----当图片加载成功时执行
onerror----当图片加载失败时执行
.src----设置图片路径作用：解决回调地狱问题语法：new Promise

// new Image()创建的是img对象，类似于使用document.getElementxxx获取到的DOM对象。
    const oImg = new Image();
    // 相当于src
    oImg.src = "https://www.itcast.cn/files/image/201904/20190415093116732.png";
    oImg.onload=()=>{ //图片加载完成之后插入
        document.body.appendChild(oImg);
    }
    oImg.onerror = function(){
        console.log("error");
    }

// 练习promise
    // 请求成功的时候触发resolve，请求失败的时候触发reject
    const oP = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // resolve();
            reject()
        },1000)
    });
    oP.then(()=>{
        console.log('then');
    }).catch(()=>{
        console.log("catch");
    })

// (1) promise加载图片  创建一个promise实例
    const oP = new Promise((resolve,reject)=>{
        // new Image()创建的是img对象，类似于使用document.getElementxxx获取到的DOM对象。
        const oImg = new Image();
        // 类似于img标签中的src
        oImg.src = "https://www.itcast.cn/files/image/201904/20190415093116732.png";
        // 执行的时候
        oImg.onload = () => {
            resolve(oImg);
        }
        // 图片加载失败的时候
        oImg.onerror = () => {
            reject("图片加载失败");
        }
    });
    // 当图片执行的时候在页面插入图片
    oP.then((oImg)=>{
        document.body.appendChild(oImg)
    }).catch((errMsg)=>{  // 不执行的时候
        console.log(errMsg);
    })

// (2) loadImg
    function loadImg(src){
        return new Promise((resolve,reject)=>{
        const oImg = new Image();
        oImg.src = src;
        oImg.onload = () => {
            resolve(oImg);
        }
        oImg.onerror = () => {
            reject("图片加载失败");
        }
    });
    }
    // 自动加载图片
    loadImg('https://www.itcast.cn/files/image/201904/20190415093116732.png')
    .then((oImg)=>{
        document.body.appendChild(oImg);
        // 第二张图片
        return loadImg('https://5b0988e595225.cdn.sohucs.com/images/20171031/9e0306ba3e1d4774bc88e14b2534f1db.png')
    }).then((oImg)=>{
        document.body.appendChild(oImg)
    })
    .catch((errMsg)=>{  // 不执行的时候
        console.log(errMsg);
    })

// (3)
    function loadImg(src){
        return new Promise((resolve,reject)=>{
        const oImg = new Image();
        oImg.src = src;
        oImg.onload = () => {
            resolve(oImg);
        }
        oImg.onerror = () => {
            reject("图片加载失败");
        }
    });
    }
    (async function(){
        try {
            const oImg = await loadImg("https://www.itcast.cn/files/image/201904/20190415093116732.png")
            document.body.appendChild(oImg);
        }catch(err){
            console.log(err);
        }
    })();

Promise 阅读代码题

js执行顺序：自上而下，先同步再异步、先微任务后宏任务
new Promise()-->Promise.resolve();
then和catch内部没有throw new Error相当于resolve
async function 相当于返回Promise.resolve()
await 后面的代码都是异步的

（1） then 和 catch 内部没有 throw new Error 相当于 resolve
    Promise.resolve()
    .then(()=>{
        console.log(1);
    })
    .catch(()=>{
        console.log(2);
    })
    .then(()=>{
        console.log(3);
    })

async

// 考点2  async function 相当于返回一个promise.resolve
    async function fn(){
        return 100;
    }
    (async function(){
        const a = fn();
        const b = await fn();
        console.log(a);
        console.log(b);
    })();

综合

async function fn1(){
        console.log("fn1 start");
        await fn2();
        console.log("fn1 end");
    }
    async function fn2(){
        console.log("fn2");
    }
    console.log("start");
    setTimeout(()=>{
        console.log("setTimeout");
    })
    fn1();
    console.log("end");

for in 和 for of 的区别

for in 遍历得到的key：可枚举的数据-->数组、字符串、对象
for of 遍历得到的value：可迭代的数据-->数组、字符串、set、Map
检验是否可枚举：Object.getOwnPropertyDescriptors(obj)->enumerable:true
检验是否可迭代：arrSymbol.iterator->next()

// 数组
    const arr = [10,20,30];
    for(let val of arr) {
        console.log(val);
    }

// 对象
    const obj = {
        name:"abc",
        age:18
    }
    for(let val of obj) {
        console.log(val);
    }

// set map
    const set = new Set([10,20,30]);
    for(let val in set){
        console.log(val);
    }
    const map = new Map([
        ["a",18],
        ["b",18],
        ["c",18],
    ])
    for(let val in map){
        console.log(val);
    }

for await...of

    简单写法
    function getPromise(num){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(num);
            },1000)
        })
    }
    const p1 = getPromise(10);
    const p2 = getPromise(20);
    const p3 = getPromise(30);
    const list = [p1,p2,p3];
    (async function(){
        const data = [10,20,30];
        for(let val of data){
            const res = await getPromise(val);
            console.log(res);
        }
    })()

for await..of：输出单独的每一个结果

    (async function(){
        for await(let res of list){
            console.log(res);
        }
    })()

Promise.all：输出一组结果

    Promise.all(list).then((res)=>{
        console.log(res);
    })

前端

手写promise/image对象

Promise 阅读代码题

for in 和 for of 的区别

for await...of