快速掌握promise、async&await相关异步知识

目录

一、JS执行机制，宏任务&微任务解读

二、Promise对象的出现解决了什么？

三、Promise和async await的区别

        async返回一个promise实例，默认是成功的状态。 

        async await(异步同步化) 后面是一个promise对象，它也可以是其他的类型 

---

一、JS执行机制，宏任务&微任务解读

        JS语言一大特点：单线程（同一时间只能做一件事）

        前一个任务 结束，才会执行后一个任务

        任务:同步任务和异步任务

        同步任务：主线程上执行的任务（形成直行线）

        异步任务：不进入主线程，进入任务队列

        在 JavaScript 中，任务的执行机制涉及两个重要的概念：宏任务（macro-task）和微任务（micro-task）。它们都是异步任务的一种分类，用于控制代码的执行顺序。

        同步代码按顺序执行，然后先执行微任务（Promise），再执行宏任务（Timeout）。这是因为微任务总是在宏任务之前执行。

        微任务：setTimeout、setInterval、ajax  ...

        宏任务:  then()、async await、nexttick  ...

           下面是一个示例，展示了宏任务和微任务的执行顺序：

console.log('Start');

setTimeout(function() {
  console.log('Timeout');
}, 0);

Promise.resolve().then(function() {
  console.log('Promise');
});

console.log('End');

        输出结果为：

Start
End
Promise
Timeout

二、Promise对象的出现解决了什么？

        Promise 对象的出现解决了 JavaScript 异步编程中的回调地狱（Callback Hell）和处理多个异步操作的复杂性。在 Promise 出现之前，处理异步操作通常使用回调函数，导致嵌套层次非常深，代码难以理解和维护。

        promise是异步编程的一种解决方案。

        promise是同步，但是promise的then()方法是异步的。

        promise是一个构造函数，可以通过new promise()得到实例对象。

        构造函数生成对象的模板。

                i.构造函数首字母大写

                ii.构造函数不写return

                iii.构造函数能当成普通函数用

                iv.this指向new过程(实例化这个过程)

 function Cat(color) {
        this.color = color;
    };
    // 原型对象的作用：重点是实现共享
    // 构造函数自身的属性和方法没有方法实现共享，但是原型对象上的属性和方法是可以被所有的实例对象共享的

    Cat.prototype.type = "动物";//原型对象上添加属性
    Cat.prototype.action = function () {
        console.log('大吉大利，今晚吃鸡');
    }

    let cat1 = new Cat('white');
    let cat2 = new Cat('black');
    console.log(cat1.action);
    console.log(cat2.type);

三、Promise和async await的区别

        async/await 基本上可以被视为 Promise 的语法糖。语法糖是指在语言中提供的一种便捷的语法，使得编写代码更简洁、易读和易于理解。

        在 JavaScript 中，async/await 是在 Promise 基础上提供的一种更高级的语法，它通过使用 async 和 await 关键字来简化异步代码的编写方式。

    console.log("a");//同步任务
    new Promise(function (resolve, reject) {
        resolve()
        console.log("b");//同步任务
    }).then(function () {
        console.log("c");//异步任务--微任务
    });
    setTimeout(function (res) {
        console.log("d");//异步任务--宏任务
    }, 0)
    console.log("e");//同步任务
    // 打印输出顺序:a b e c d

        async返回一个promise实例，默认是成功的状态。 

 //async 语法糖
    async function fn() {
        return 321 //async返回一个promise实例，默认是成功的状态。
    };
    fn().then(res => {
        console.log(res);
    })
    console.log(10);
//输出答案顺序为：10 321

        async await(异步同步化) 后面是一个promise对象，它也可以是其他的类型 

  //async await(异步同步化) 后面是一个promise对象，它也可以是其他的类型
    function p() {
        new Promise((resolve, reject) => {
            console.log(2);
            resolve(4)
        }).then(res => {
            console.log(res);
        })
    };
    async function f() {
        console.log(3);
        await p();
        console.log(1);
    }
    f();
    console.log(5);
    // 输出答案顺序：3 2 5 4 1

《到此结束，感谢列位收看》