2021-06-26个人Promise的初步学习

JavaScript

Promise简述

概念

将异步操作变为同步操作

例如：在向服务器提交get请求时候，需要时间响应，就导致了异步操作的响应不及时

在未使用Promise的异步操作下

function one(){
            return "I am one"
        }
        function two(){
            setTimeout(() => {
                return "I am two"
            }, 3000);
        }
        function three(){
            return "I am three"
        }
        function run(){
            console.log(one());
            console.log(two());
            console.log(three());
        }
        run()

以上代码由于没有针对异步操作做处理，因此当选择执行console.log(two())时就会导致无法输出的情况

发生这种情况的原因其实就是在run被执行的过程中，程序不会等待two被执行结束。转而直接执行console.log，就导致了这种情况，只会输出undefine

在开发中很多时候需要出现等待的情况，就是需要做将异步处理为同步的操作

实际中的开发如果需要让代码等待two()的执行完毕，则需要运用Promise方法

使用了Promise将异步操作处理为同步操作

function one(){
            return "I am one"
        }
        function two(){
            //resolve代表promise响应成功，rejecr代表promise响应失败
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve("I am two")
                }, 3000);
            })
        }

        function three(){
            return "I am three"
        }
        //声明async代表以下函数存在promise请求
        async function run(){
            console.log(one());
            console.log(await two());
            console.log(three());
        }
        run()

在方法调用的过程中，对于方法的执行，执行函数中如果包涵了包含的有Promise方法的函数，则需要在方法前声明一个 async 同时也需要在需要处理的方法前加 await

对Promise操作的三条总结

执行async函数，返回的都是Promise对象

var app = new Vue({
            el: '#app',
            data: {
            }
        })
        async function test1(){
            return 1;
        }
        async function test2(){
            return Promise.resolve(2);
        }
        const result1 = test1();
        const result2 = test2();
        console.log("result1",result1);
        console.log("result2",result2);

值得注意的是，async指的其实就是异步函数，主要用作声明

如果asnyc函数中你返回的并不是一个Promise对象，则JS就会自动的将返回结果封装为一个Promise对象

Promise.then 成功的情况下，就直接对应await

async function test3(){
            const p3 = Promise.resolve(3);
            p3.then(data=>{
                console.log("result3",data);
            })
            const data = await p3;
            console.log("result3",data)
        }
        test3();

执行结果如下：

同样的

async function test4(){
            const data4 = await 4;//就相当于是 Promise.resolve(4) ,自动将4封装为了Promise对象
            console.log("result4",data4)
        }

Promise.catch 异常的情况对应 try … catch

当我们需要处理Promise.reject的时候

async function test6(){
            const p6 = Promise.reject(6);
            const data6 = await p6;
            console.log("result6",data6)
        }
        test6();

可以发现虽然输出了6，但是相应的也是返回了一个未被处理的异常

则此处就需要通过try ， catch来处理这个异常

async function test6(){
            const p6 = Promise.reject(6);
            try{

                const data6 = await p6;
                console.log("result6",data6)
            }
            catch(e){
                console.error("Error",e)
            }
        }
        test6();