【promise + yield + async + await】异步转同步

最新推荐文章于 2024-05-16 21:01:14 发布

SpringYoungYu

最新推荐文章于 2024-05-16 21:01:14 发布

阅读量499

点赞数 2

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/qq_44917015/article/details/126312010

版权

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script>
            // 异步操作
            // let p = new Promise(function(resolve,reject){
            //     //在这里异步行为 
            //     let img = new Image();
            //     img.src = './img/2-.jpg';
            //     img.onload = function(){
            //         resolve(img)
            //     }
            //     img.onerror = function(){
            //         reject(img.src)
            //     }
            // })
            // p.then(function(img){
            //     console.log(img);
            // },function(src){
            //     console.log(src);
            // })

            // p.then(function(img){
            //     console.log(img);
            // }).catch(function(img){
            //     console.log(img);
            // })

            function loadImage(src) {
                return new Promise(function (resolve, reject) {
                    let img = new Image();
                    img.src = src;
                    /* 
                    resolve reject 只会执行一次
                    */
                    img.onload = function () {
                        resolve(img)//只会执行一次
                    }
                    img.onerror = function () {
                        reject(img.src)
                    }
                })
            }
            /* 
            async 函数执行后返回promise对象
            async函数中return结果需要使用then方法中函数的参数获取
            await必须写在async函数中，await的作用是阻塞式同步 
            await后面必须是promise
            */
            // async function abc(fn){
            //     let arr = []
            //     for(let i = 3;i<80;i++){
            //         // await 阻塞式同步 加载完一张 才到下一张
            //         let img = await loadImage(`./img/${i}-.jpg`)
            //         arr.push(img)
            //         // .then(function(img){
            //         //     arr.push(img);
            //         // })
            //     }

            //     // let aa =  await loadImage(`./img/5-.jpg`)
            //     // console.log(aa);

            //     // console.log(arr);
            //     // fn(arr)
            //     return arr;
            // }
            // let p = abc();
            // p.then(arr=>{
            //     console.log(arr);
            // })

            // abc(function(arr){
            //     arr.forEach(item=>{
            //         console.log(item.src);
            //     })
            // })

            // loadImage('./img/2-.jpg').then(function (img) {
            //     return loadImage('./img/3-.jpg')
            // }).then(function (img) {
            //     return loadImage('./img/4-.jpg')
            // })
            // .catch(function(err){
            //     console.log(err);
            // })

            // 一种预加载
            // let arr = []; // all 使用 ；静态方法
            // for(let i = 4;i<20;i++){
            //     arr.push(loadImage(`./img/${i}-.jpg`))
            // }
            // console.log(arr);
            // all =》 逐一异步执行【按照添加顺序执行】
            // 预加载图片的方式
            // Promise.all(arr).then(function(list){
            //     console.log(list);
            //     list.forEach(item=>{
            //         console.log(item);
            //     })
            // })

            // Promise.race(arr).then(function(res){
            //     console.log(res);
            // })

            // async function fn1(){
            //     return 100
            // }
            // let a1 =  fn1()
            // a1.then(num=>{
            //     console.log(num);
            // })
            // let a2 = Promise.resolve(1000)
            // a2.then(num=>console.log(num))

            // await 关键字可以在async中使用；但是await只能用于promise对象之前

            // async function fn1(){
            //     console.log("123123 aaa");
            //     // 阻塞式同步
            //      Promise.resolve(1000).then(num=>{
            //         console.log(num,'bbb');
            //     })
            //     console.log('ccc');
            // }
            // fn1()


            // 使用yield
            var arr = []
            function* fn() {
                for (let i = 3; i < 80; i++) {
                    // 完成阻塞式同步
                    yield loadImage(`./img/${i}-.jpg`)
                }
            }
            var f = fn()
            for (let item of f) {
                if(item.constructor !== Promise) break;
                if(item instanceof Promise){
                    item.then(img=>{
                        console.log(img.src);
                    })
                }
            }
        </script>
    </body>

    </html>