Day23 Promise

简介: Promise 是 JS 中进行异步编程的一种解决方案。

Promise

##### 概述

Promise 是 JS 中进行异步编程的一种解决方案。

简介
<!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>

    <script>

        /*
            Promise
                Promise 是一门新的技术(ES6 规范)
                Promise 是 JS 中进行异步编程的新解决方案

                Promise 的状态改变
                    pending 变为 resolved
                    pending 变为 rejected

                    只 2 种, 且一个 Promise 对象只能改变一次,无论变为成功还是失败, 
                    都会有一个结果数据, 成功的结果数据一般称为 Value, 
                    失败的结果数据一般称为 reason

                特点:
                    指定回调函数的方式更加灵活
                        旧的: 必须在启动异步任务前指定
                        Promise: 启动异步任务 => 返回Promise对象 => 给Promise对象绑定回调函数
                                (甚至可以任务结束后指定多个回调)

                    支持链式调用, 可以解决回调地狱问题
                
                什么是回调地狱:
                    回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

                回调地狱的缺点:
                    不便于阅读
                    不便于异常处理
                    
                解终极解决方案:
                    Promise链式调用
        
        */

        const but = document.getElementById("btn")
        but.addEventListener("click", function () {
            let randomNumber = Math.ceil(Math.random() * 100)
            //这里new Promise
            const p = new Promise(function (resolve, reject) {
                setTimeout(() => {
                    if (randomNumber < 30) {
                        //成功的状态
                        resolve("中奖了!")
                    } else {
                        //失败的的状态
                        reject("抱歉,很遗憾!")
                    }
                }, 1000)
            })
            p.then(value => {
                //这里是p的pending属性为resolve/fulfilled
                alert(value)
            }, reason => {
                //这里是p的pending属性为rejected
                alert(reason)
            })
        })


    </script>

</head>

<body>

    <button id="btn">点我</button>

</body>

</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>

    <script>

        /*
            Promise.prototype.then方法:(onResolved(成功), onRejected(失败)) => {}
                resolve:
                    1.如果传入的参数为 非Promise类型的对象, 则返回的结果为成功Promise对象
                    2.如果传入的参数为 Promise 对象, 则Promise对象的状态决定了 p2执行onResolve还是OnRejected

                reject:
                    1.如果传入的参数为 非Promise类型的对象, 则new Promise返回的结果永远为失败Promise对象
                    2.如果传入的参数为 Promise 对象, 则Promise对象的状态决定了 p执行onResolve还是OnRejected


            all:
                Promise.all(这里是一个数组,数组里面有一个一个的Promise),
                他返回一个新的 Promise, 只有所有的 Promise都成功才成功, 
                只要有一个失败了就直接失败。

            race:
                返回一个新的 Promise, 第一个完成的 Promise的结果状态就是最终的结果状态

            catch:
                处理错误的方法
        */
        // resolve
        // let p1 = Promise.resolve(521);
        // let p2 = Promise.resolve(
        //     new Promise((resolve, reject) => {
        //         // resolve('OK');
        //         reject("Error");
        //     })
        // );
        // // 如果不对出错进行处理(指定错误回调),控制台就会报错
        // p2.then((value) => {
        //     console.log(value);
        // }, (reason) => {
        //     console.log(reason);
        // });
        // console.log(p1)
        // console.log(p2)



        // reject
        // let p1 = Promise.reject(521);
        // let p2 = Promise.reject('haha');
        // let p3 = Promise.reject(
        //     new Promise((resolve, reject) => {
        //         resolve("OK");
        //     })
        // );
        // p3.then((value) => {
        //     console.log(value);
        // }, (reason) => {
        //     console.log(reason);
        // });
        // console.log(p1)
        // console.log(p2)
        // console.log(p3);



        // all
        // let p1 = new Promise((resolve, reject) => {
        //     resolve("OK");
        // });
        // let p2 = Promise.resolve('Success');
        // // let p2 = Promise.reject("Error");
        // let p3 = Promise.resolve("Oh Yeah");
        // const result = Promise.all([p1, p2, p3]);
        // console.log(result);



        // race
        // let p1 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         reject("OK");
        //     }, 1000);
        // });
        // let p2 = Promise.resolve("Error");
        // let p3 = Promise.resolve("Oh Yeah");
        // //调用
        // const result = Promise.race([p1, p2, p3]);
        // console.log(result);



        // catch
        // let p = new Promise((resolve, reject) => {
        //     reject('error');
        // });
        // p.catch(reason => {
        //     console.log(reason);
        // });






    </script>

</head>

<body>

</body>

</html>
目录
相关文章
|
6月前
|
前端开发 API 容器
说说你对 promise 的了解
说说你对 promise 的了解
33 0
|
前端开发 小程序 JavaScript
promise 应用
promise 应用
58 0
|
前端开发 JavaScript 测试技术
6 # 实现简单的 promise
6 # 实现简单的 promise
38 0
|
5月前
|
前端开发
|
6月前
|
前端开发
对Promise的理解
对Promise的理解
42 2
|
11月前
|
前端开发
Promise
Promise
57 1
|
存储 JSON 前端开发
深入使用 Promise
前面各种铺垫已经好了,现在我们一起来用一用Promise!
73 0
|
前端开发
对promise的理解分享
对promise的理解分享
|
前端开发 JavaScript
深入理解Promise
深入理解Promise
88 0
|
前端开发 JavaScript
Promise使用详解
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来了解Promise使用详解
102 0