JavaScript中的异步编程，Promise

什么是同步？

当一个调用发出时，在没有得到结果之前，这个调用就会阻塞后面的代码执行，得到结果的时候才会返回。

什么是异步？

调用发出的时候，就直接返回了，对应的结果会通过状态、通知告诉调用者或者通过回调函数处理这个调用。异步调用发出后，不会阻塞后面的代码。

console.log(1);
    setTimeout(()=>{
        console.log(3);
    },0);
    console.log(2);

输出结果是：1 2 3

Promise

解决回调地狱提出的新方案——Promise

//回调地狱
    //一层回调
    /* function ajax(cb){
        setTimeout(()=>{
            cb && cb();
        },1000)
    }
    ajax(()=>{
        console.log("任务1");
    }); */

    //两层回调
    //执行完任务1之后执行任务2。在定义一个回调函数的时候，定义一个参数接收另一个回调函数
    function ajax(cb){
        setTimeout(()=>{
            cb && cb(()=>{
                console.log("任务2");
            });
        },1000)
    }
    ajax((cb2)=>{
        console.log("任务1");
        setTimeout(()=>{
            cb2 && cb2();
        })
    })

Promise改造回调函数

function ajax(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        })
    }
    ajax().then(()=>{
        console.log("任务1");
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        })
    }).then(()=>{
        console.log("任务2");
    })

catch方法捕获错误

function fn(num){
        return new Promise((resolve,reject)=>{
            if(typeof num === "number"){
                resolve(num);
            }else{
                const err = new Error("请输入数字")
                reject(err);
            }
        })
    }
    fn(3).then(n=>console.log(n))
        .catch(e=>console.log(e))

如果输入的不是number型，则会捕获错误。

Promise.all

用于判断所有的参数（数组）的所有Promise是否全部执行完毕，当全部执行完毕之后才会执行.then

const imgUrl1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650674819&t=baf367967593e5153722a82b83aa0a47";
    const imgUrl2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650674910&t=3ce83a7324b71b76372aa115fab9cdf5";
    const imgUrl3 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0814%2F17c8e8c3c106b879aa9f4e9189601c3b.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650674943&t=4e44b0323dd1f01bc7a8495c2057779b";
    function getImage(url) {
        return new Promise((resolve, reject) => {
            const img = document.createElement("img");
            img.src = url;
            img.onload = () => resolve(img);
            img.onerror = (err) => reject(err);
        })
    }
    //渲染所有图片
    function showImage(imgs) {
        imgs.forEach(item => {
            document.body.appendChild(item);
        })
    }
   function showFirstImg(img){
        document.body.appendChild(img);
    }
    /* 用于判断所有的参数（数组）的所有Promise是否全部执行完毕，当全部执行完毕之后才会执行.then
    Promise.all([getImage(imgUrl1), getImage(imgUrl2), getImage(imgUrl3)]).then(showImage) */
    //用于希望多个Promise函数当中只要有一个执行完毕就会触发.then
    Promise.race([getImage(imgUrl1), getImage(imgUrl2), getImage(imgUrl3)]).then(showFirstImg)

所有的图片是一起出来的。