异步编程 async-await-网络请求-捕获错误-手写Promise-总结

1.异步编程

   事件循环机制：

   Eventlop:

      微任务

         promise.then回调: async

      宏任务

        script  setTimeOut setInterval 的回调函数

    http 请求:

      ajax axios请假

      加载地图

      加载图表等。

   

    难题：

      异步程序不知道是什么时候结束。

2：async

 

    function foo() {

        }

        const bar = () => {

        }

        // 语法糖：具有一定更能性的内容，就是语法糖
        async function fun() {
            // return 给 async fun 饭会的promise.[[promiseResult]] 赋值的。
            return 241324323
        }

        let res = fun();
        console.log(res);
        //  asnyc 函数特点:
        // 1:是一个语法糖
        // 2:函数执行时候返回值是一个prmise实例对象,(与定义async函数中return 没有关系)
        // 3：返回的promise实例对象的 状态为  fulfilled
        // async 中return 作用是什么？

 3:await

    async function bar(){
            return 1235
        }
        // bug:await 只能在 async 的方法体中有效
        // function foo(){
        //     await bar();
        // }

        async function foo(){
            // 语法: await promise实例对象；\
            // 作用: 获取await的promise实例对象中的[[PromiseResutl]] 的赋值;
            let res = await new Promise((resolve)=>{
                console.log('同步代码');
                resolve(123) // 给 [[PromiseResutl]] 赋值
            })
            // --->  = await prmise实例对象（new）
            // ----> =  resove(实参)
            // -----> = [[promiResult]]的赋值
            // -----> = 123
            console.log(res);
            // let b = await bar();
            // = await promis对象;
            // = promis对象.[[PromiseReuslt]]
            // = 1235
            // console.log(b);
            // let p = bar();
            // let b = await p;
            // console.log(p);
            // console.log(b);
        }

        foo()

        /*
        总结:
        1 await 只能在async函数中编写
        2 await 必须根promise实例对象
        3 awiat  获取await后的promise实例对象的 [[promiseResult]] 的赋值
          因为浏览器编译 [[xxxx]] 不支持  obj.xxx取值方式，要么api 获取 要么 关键字获取。
          所以 [[PromiseResult]] 的获取值有多种方式：
          总结如下：
             1： await
             2:  then回调函数形参 
        */

        /*
        [[PromiseResult]]特点：
        1：每个promise 实例对象都有该属性
        2：赋值方式有以下： 
           1：new Promise 的resolve() 是实参
           2：then 的retrun 
           3: async 函数的return
        3：渎值的方式如下：
           1： await
           2:  then 的回参   
        */

        /**
         * 套路：在多个promise对象中共，如何直到获取的是哪个promise实例的[[PromiseResult]]:
         * 1: 判断：是不是promise实例对象，console.log() 打印
         * 2：如果是：再看 [[promiseResult]] 赋值 
         *    2.1 直接.then
         *    2.2 在当前情况下 搭建一个async 函数 用await 
         * 
         * 
         * 排错：如果不是prmise实例对象；往上找，改代码
         *      如果是promise 但是：[[PromiseResult]] 赋值undefined 
         *      1：该promise是如何创建的？
         *         new Promise   ---> resolve() 没有 实参
         *         then()返回值  ----> then回调的没有 return 
         *         async 返回值  ----> async 中没有 retrun 
         */

4：网络请求

   // 难题：没办法知道哪个哪个请求是第一个响应完毕的
        //       无法知道，哪个请求是最后一个响应的
        axios({}).then(res => {
            console.log(1);
        });
        axios({}).then((result) => {
            console.log(2);
        })
        axios({}).then((result) => {
            console.log(3);
        });




        (async function () {
            let a = await axios({})
            console.log(1);
            let b = await axios({})
            console.log(2);
            let c = await axios({});
            console.log('三个请求都借宿了');
        })()


        // 等三个请求都成功了.... 


        // 请说出输出顺序
        // axios({}).then(res => {
        //     console.log(1);
        //     axios({}).then(res => {
        //         console.log(2);
        //         axios({}).then(res => {
        //             console.log(3);
        //         });
        //     });
        // });

5:捕获错误

        try{
            (async function(){
                console.log('1111');
                let p = await new Promise((res,rej)=>{res(1)});
                console.log(2222222222);
                // 在 try 中 多个 promise 只要有一个变为已拒绝状态,下面所有promise不执行,直接执行catch
                let p1 = await new Promise((res,rej)=>{rej(321)});
                console.log(3333333333333333);
                let p2 = await new Promise((res,rej)=>{res(1)});
                console.log(444444444444444);
                let p3 = await new Promise((res,rej)=>{res(1)});
                console.log(555555555555);

            })()
        }catch(err){
            console.log('用户捕获asyn中的错误');
        }
        
    // 1:应用
    // 2:promise A+ 规范
    // 3:promise的原理

手写Promise

        class Promise {
            constructor(cb){
                const resolve = (data)=>{

                }
                const reject = () =>{

                }
                cb(resolve,reject)
            }

            then = (cb)=>{
                return  new Promise()
            }
            static all = ()=>{

            }
        }

        let p = new Promise((resolve,reject)=>{

        })

结论：

- 手写bind

- 手写promise

- instance 原理

- v8 垃圾回收机制

- new 的原理的是什么