「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

async

> async / await 是 ES6 新增的关键字，用于把异步处理程序变为同步；

async 在函数定义时使用，用 async 函数声明的函数默认返回一个 promise 实例，返回值可以直接 .then
await 右边如果是 Promise 就等着 Promise 状态发生变更，如果是同步代码直接执行；如果 await 执行的方法返回的 promise 对象，我们可以直接在对象使用 then 方法；此外，await 下面的代码都会变成微任务

在项目中我们经常将 async Promise 和 ajax一起使用：

function getAside() {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('get', 'aside.json', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText))
      }
    };
    xhr.send();
  })
}

function getBanner() {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('get', 'banner.json', true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText))
      }
    };
    xhr.send();
  })
}

async function bindHTML() {
  let aside = await getAside(); // await 会返回 promise resolve 后的值
  let [,,third] = aside;
  let banner = await getBanner(third);
  console.log(aside);
  console.log(banner);
}
bindHTML();

代码执行顺序（js的执行机制）

1.js代码执行之前，浏览器会为其开辟全局作用域，然后对全局中的变量进行提升操作，对带var和带function进行提前的声明或者定义；
2.变量提升结束后，js代码开始从上到下执行；执行的过程中对带var的变量进行赋值：
- 2.1 如果是赋值一个基本数据类型的值，那么直接把基本类型的值存在作用域中，并且把变量和值关联起来；
- 2.3 如果是赋值一个引用数据类型，浏览器会开辟一个堆内存，存储这个引用数类型的值，然后把这个堆内存的地址赋值给变量（这个时候这个内存地址是存在作用域中的）
3.如果执行过程遇到函数执行会经历以下几步：
- 1.浏览器会函数代码执行再开辟一个新的作用域（一块新的栈内存）（这解释函数每次执行都是互相独立的，因为每次执行的环境不同）
- 2.形参赋值，形参也是变量，把函数执行时实参赋值给形参。
- 3.私有作用域中的变量提升，对私有作用域中的带var和带function的提前处理（在当前作用域中变量提升）
4从上到下执行函数代码
- 4.1如果再遇到函数执行重复第三步

js 执行顺序+async await

async

代码执行顺序（js的执行机制）