Async异步操作

异步操作

同步和异步的区别

• JavaScript是如何执行的？
• 自上而下，从左到右一行一行执行
• 如果有一行报错，后面的代码不执行
• 先执行同步代码，再执行异步代码（setTimeout、Ajax）

EventLoop机制执行怎样执行

  console.log("start")
        setTimeout(()=>{
            console.log("setTimeout")
        },2000)
  console.log("end")

执行结果

Event Loop 过程（面试经常会被问到*）

1. 同步代码，一行一行放在 Call Stack 中执行
2. 遇到异步，会先“记录”下代码，等待执行时机（setTimeout、Ajax）。时机到了，将之前“记录”的代码放入 Callback Queue
3. 当 Call Stack 为空（同步代码执行完），Event Loop 开始工作
4. Event Loop 轮询查找 Callback Queue 中是否有可执行的代码。如果有，将代码移动到 Call Stack 中执行
5. Event Loop 如果没有找到可以执行代码，则会继续轮询查找

如图

宏任务和微任务

• 微任务：Promise、async await
• 宏任务：setTiemout、setInterval、Ajax、DOM事件

宏任务、微任务、DOM渲染的关系

• Call Stack 清空，触发Event Loop
• 执行微任务
• DOM渲染
• 执行宏任务

async

async/await 是ES2017引入的更高级的异步编程模型，它是基于Promise的语法糖，使得异步代码的编写更加直观和简洁，几乎像同步代码一样自然。

• async 关键字用于声明一个异步函数，这个函数总是返回一个Promise对象。
• await 关键字只能在async函数内部使用，它使得程序能够等待一个Promise的结果，但不会阻塞其他代码的执行。当await后面跟着的Promise解析（fulfilled）时，它会暂停async函数的执行并返回Promise的结果；如果Promise被拒绝（rejected），则await表达式会抛出异常。

async作用

• 出现async/await是因为在使用Promise时，需要频繁地使用.then() 方法来处理异步操作的结果，这样会导致代码可读性较差，而且错误处理也比较麻烦。
• 使用 async/await 可以让异步代码的写法更加简洁和直观，使代码更易读、易懂和易维护。
• 最重要的一点是有些面试会考

async和await基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

function timeout(ms) {
  return new Promise((res) => {
    setTimeout(res, ms);
  });
}
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}
asyncPrint('hello 李嘉城', 1000);

在1秒后输出hello 李嘉城 Data();

async 加载图片

要不Promise写法简单

 function getImg(src) {
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.src = src
                img.onload = function () {
                    resolve(img)
                }
                img.onerror = function () {
                    reject('图片加载失败')
                }
            });
        }  

        (async function () {
            try {
                const imgs1 = await getImg('https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png')
                const imgs2 = await getImg('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg')
                document.body.appendChild(imgs1)
                document.body.appendChild(imgs2)
            }
            catch (d) {
                console.log(d)
            }
        })()

执行结果