15.ES6 Promise

作者: 圆梦人生 | 来源:发表于2019-02-15 09:38 被阅读0次

    ES6中的Promise主要用来传递异步操作的消息

    来自官网解释:

    Promise主要有以下特点:
    1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:

    • pending: 初始状态,不是成功或失败状态
    • fulfilled: 意味着操作成功完成
    • rejected: 意味着操作失败

    2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的

    个人理解:

    1、Prosime异步同步化操作
    2、.resolve抛出成功结果,reject抛出失败结果
    3、通过then获取成或者失败
    4、可以定义catch统一接收失败信息,通过then接收失败方法,catch不起作用

    案例:

    <!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>Prosime</title>
        <script>
            // 1.Prosime异步同步化操作
            // 2.resolve抛出成功结果,reject抛出失败结果
            // 3.通过then获取成或者失败
            let p = new Promise((resolve, reject)=>{
                // 异步操作
                setTimeout(()=>{
                    // sucessFlag为true表示成功,否则表示失败
                    let sucessFlag = true
                    //
                    if(sucessFlag){
                        resolve({
                            sucess: true,
                            message: '操作成功'
                        })
                    }else{
                        reject({
                            sucess: false,
                            message: '操作失败'
                        })
                    }
                }, 2000)
            });
    
            // 调用then获取数据
            p.then((data)=>{
                console.log('成功');
                console.log(data);
            }, (error)=>{
                console.log('失败');
                console.log(error);
            })
            // 如果在then中定义了失败,则不会走到这里,可是使用catch统一捕获错误,当代码异常时也会走入catch
            .catch((error)=>{
                console.log('catch:失败');
                console.log(error);
            })
        </script>
    </head>
    <body>
        
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:15.ES6 Promise

        本文链接:https://www.haomeiwen.com/subject/mftpeqtx.html