Promise的API:all、race

曾经终败给现在 2023-06-19 02:12 82阅读 0赞

###  MDN:Promise的API链接地址：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Promise/all][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Promise_all] ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>06_Promise的API</title>
    </head>
    
    <body>
    
    </body>
    <script>
        /*
            1. Promise构造函数: Promise( excutor){}
                excutor函数:同步执行( resolve， reject) =>{}
                resolve函数:内部定义成功时我们调用的函数 value=>{}
                reject函数:内部定义失敗时我们调用的函数 reason=>{}
                说明: excutor会在Promise内部立即同步回调，异步操作在执行器中执行
        
            2. Promise.prototype.then方法: (onResolved, onRejected)=> {}
                onResolved函数:成功的回调函数(value)=>{}
                onRejected函数:失败的回调函数(reason)=>{}
                说明: 指定用于得到成功va1ue的成功回调和用于得到失败reason的失败回调
                返回一个新的 promise对象
        
            3. Promise.prototype.catch方法: (onRejected) => {}
                onRejected函数: 失败的回调函数(reason)=>{}
                说明:then()的语法糖，相当于:then( undefined， onRejected)
        
            4. Promise. resolve方法:( value)=>{}
                va1ue:成功的数据或promise对象
                说明:返回一个成功/失败的 promise对象
        
            5. Promise. reject方法:( reason)=>{}
                reason:失敗的原因
                说明:返回一个失敗的 promise对象
            
            6.Promise.all方法：(promises)=>{}
                promises:包含n个promise的数组
                说明:放回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败
            
            7.Promise.race方法：（promises）=>{}
                promise:包含n个promise的数组
                说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态
        */
    
        //将1,2,3简单的代码演示一下
        new Promise((resolve, reject)=>{
            setTimeout(()=>{
                // resolve('成功的回调')
                reject('失败的回调')//注意：状态只能改变一次，所以如果想看到打印的是失败的回调，就只能把上面的注释掉
            },2000)
        }).then(
            value =>{
                console.log(value)
            }
        ).catch(
            reason => {
                console.log(reason)
            }
        )
    
        //产生一个成功值为1的promise对象,成功值为1成功后还想产生2,3,4,5,6，应该怎么办
        const p1 = new Promise((resolve, reject)=>{
            resolve(1)
        })
        p1.then(
            value =>{
                console.log(value)
            }
        )
        const p2 = Promise.resolve(2)
        p2.then(
            value =>{
                console.log(value)
            }
        )
        const p3 = Promise.reject(3)
        p3.catch(
            reason => {
                console.log(reason)
            }
        )
    
    
    
        //6.Promise.all方法
        Promise.all([p1, p2, p3]).then(
            values =>{
            console.log(values)
            },
            reason => {
                console.log(reason)
            }
        )
    
        // 7.Promise.race方法
        Promise.race([p1, p2, p3]).then(
            value =>{
                console.log(value)
            },
            reason => {
                console.log(reason)
            }
        )
    
    
    
    </script>
    
    </html>

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Promise_all]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all