Promise在异步函数的运用

大大源码 • 2023年4月24日 am12:32 • 其他

Promise在异步函数的运用

1.Promise的定义

 1.1  Promise 是表示异步操作最终完成或失败的对象。

2.使用方法–MDN官方图解

3.使用示例–Resolve

 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'))

3.1 .then() 方法最多接受两个参数；第一个参数是承诺的已解决案例 resolve的回调函数，第二个参数是被拒绝案例reject的回调函数。每个 .then() 返回一个新生成的 promise 对象，这样可以选择性地用于链接。

4.使用案例–Reject

 function judgenumber(num) {
        return new Promise((resolve, reject) => {
            if (typeof (num) === 'number') {
                resolve(num)
            } else {
                let err = new Error('不是数字')
                reject(err)
            }
        })
    }
    judgenumber(2).then((num) => console.log(num)).catch(err => console.log(err))

4.1这个reject是用于处理异常的，后面要接.catch()从而对异常的情况进行处理

5.实际的用途–图片的全部加载，提升用户体验

 const imgurl1 = 'https://th.bing.com/th/id/Rf9b9d9068b2d3c2858f7689b2f28d2e6?rik=23wqfZbUNqo40g&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201510%2f05%2f201510051125552148.jpg&ehk=iXw34eHdrpJuGdK3aA4ipMB5t1vEwl9XeRipGAH1nL4%3d&risl=&pid=ImgRaw'
    const imgurl2 = 'https://th.bing.com/th/id/Rb434ae6d484616d1c28cb72378aecb92?rik=%2bnvI7AmO7LwqZA&riu=http%3a%2f%2fwww.ukutu.cn%2fupload%2f201602%2f29%2f20160229173734358.jpg&ehk=%2bQPG4%2fX76uSfRRZnC16OzjqvwaHGD%2b9Es96kArhj9CI%3d&risl=&pid=ImgRaw'
    const imgurl3 = 'https://th.bing.com/th/id/R432777ea00985fee4ae0ae797fe8be98?rik=2wxQvz13wzwtdA&riu=http%3a%2f%2fwww.58gc.me%2fuploads%2fimage%2f20191107%2f20191107211213_74207.jpg&ehk=QRz9js6MKVFd64coy%2bssME5x6XfGfXpwACGrE1ubrmY%3d&risl=&pid=ImgRaw'
    function getImg(url) {
        return new Promise((resolve, reject) => {
            let img = document.createElement('img')
            img.src = url

    
            img.onload = ()=>resolve(img)
            img.onerror =(err)=> reject(err)
        })
    }

    function showImage(values){
        for(let img of values){

            console.log(img);
            document.body.appendChild(img)
        }
        // values.foreach(item=>{
        //     document.body.appendChild(item)
        // })
    }
    //确保所有的图片都加载了，就可以执行then里面的函数
    //  Promise.all([getImg(imgurl1),getImg(imgurl2),getImg(imgurl3)]).then(showImage)  
    //只要有一张图片加载了就执行then
    Promise.race([getImg(imgurl2),getImg(imgurl1),getImg(imgurl3)]).then(img=>{
        document.body.appendChild(img)
    })
									**HTML 文件**
<!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>

</body>
<script src="JS路径"  type="module"></script>
</html>

5.1 这里用到了Promise.all() 这个方法数组作为输入，并返回一个解析为输入 promise 结果数组的单个 Promise。当数组中的元素状态都改变，完成功能时，才会启动调用.then()
5.2Promise.race() 方法是数组中任何的元素变化都会引起.then的调用

6.与async,await配合实现同步功能

  function fn1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('任务1');
                resolve();
            }, 1000);
        })
    }
    function fn2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('任务2');
                resolve();
            }, 1000);
        })
    }
    function fn3() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('任务3');
                resolve();
            }, 1000);
        })
    }
    //当await等到resolve状态后才进行下一步
    async function Init(fn1, fn2, fn3) {
        await fn1()
        await fn2()
        await fn3()
    }

    Init(fn1, fn2, fn3)