Promise用法详解

什么是Promise呢？

 首先我们先看一个例子

<script>
        // 1.封装异步函数 5.给这个封装函数传入三个形参
        function getFood(count,successCallback,errCallback){
            // 3.声明一个定时器 来模拟异步操作
            setTimeout(()=>{
                // 6.判断这个标识符 成功执行这个函数
                if(count>0){
                    let name = "张三";
                    let num = 0;
                    for(let i = 0;i<100;i++){
                        num++;
                    }
                    successCallback(num);
                }else{
                    // 失败执行这个
                    errCallback("无了");
                }
            },3000);
        };
        // 2.调用这个函数 4.给这个函数传入三个实参 一个是标识符 一个成功函数 一个失败函数
        getFood(-1,(value)=>{
            console.log("这是一个成功的函数",value);
        },(err)=>{
            console.log("这是一个失败的函数",err);
        });
        // 在ES5之前我们都是这样解决异步处理问题 逻辑没有问题 也能实现这个操作
        // 但是每个人封装的函数都是不一样的 有的人喜欢把成功的实参函数写在前面、中间或者后面
        // 实参位置与相对应 形参位置不一致 可能形参成功函数位置对应实参失败的位置 所以造成了很多麻烦
        // 而我们要学的promise就是一个标准 来解决这样问题
    </script>

在上面的解决方案中，我们确确实实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题： 

第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；

第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它 这个函数到底怎么用； 

在ES5之前我们都是这样解决异步处理问题 逻辑没有问题 也能实现这个操作

但是每个人封装的函数都是不一样的 有的人喜欢把成功的实参函数写在前面、中间或者后面

实参位置与相对应 形参位置不一致 可能形参成功函数位置对应实参失败的位置 所以造成了很多麻烦

而我们要学的promise就是这样一个标准

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

---

我们来看一下Promise的API是怎么样的：

Promise是一个类，可以翻译成 承诺、许诺 、期约；

当我们需要的时候，给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象；

在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor 

这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject； 

当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数；

当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数；

---

Promise的代码结构

上面Promise使用过程，我们可以将它划分成三个状态：

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝；当执行executor中的代码时，处于该状态； 

已兑现（fulfilled）: 意味着操作成功完成； 执行了resolve时，处于该状态，Promise已经被兑现；

已拒绝（rejected）: 意味着操作失败；执行了reject时，处于该状态，Promise已经被拒绝

 <script>
        // 封装一个异步请求任务
        // 1.封装函数  4.写入形参
        function getFood(){
            // 5. 实例promise对象   这个对象里面是立即执行函数 两个参数 resolve reject
            const promise = new Promise((resolve,reject)=>{
                let name = "张三";  // 待定状态 
                let age = 17;  // 待定状态 
                console.log("我是待定状态");  // 待定状态 
                if(age >= 18){
                    // 已兑现 状态
                    resolve("我是一个成年人");
                }else{
                    // 已拒绝 状态
                    reject("我是一个小朋友");
                };
            });
            promise.then((value)=>{
                 console.log("你今年多大了？",value);
             });
            promise.catch((err)=>{
                 console.log("你今年多大了？",err);
             })
        };
        // 2.调用这个函数  3.给这个函数传入实参
        getFood();
    </script>