异步等待

@Async Await

特点

. async/await: 基于 Promise 的语法糖，用于简化 Promise 的使用，使异步代码看起来更像同步代码，从而更容易阅读和维护

. 顶级作用域 - await is only valid in async functions and the top level bodies of modules

. 配对出现

. 使用 async 关键字定义的函数会自动返回一个 Promise

. 只能在 async 函数内部使用，用于等待一个 Promise 的解析

. 使用 try...catch 块来处理错误

. 多用于封装 Promise/fetch 请求

使用

1. 不处理异常；更简洁

async function loadData(url) {
  let res = await fetch('./data2021/'+url);
  let json = await res.json();
  console.log(json);
}

loadData('stu.json');

2. 处理异常；更健壮

async function getData() {
  try {
    let res = await fetch('./data2021/stu.json');
    console.log(res);
    let json = await res.json();
    console.log(json);
  } catch (err) {
    console.log(err);
  }
}

async function addData() {
  try {
    let obj = {
      author: 'cnplaman',
      bookname: 'web',
      publisher: 'cn',
    }
    let res = await fetch('http://ajax-base-api-t.itheima.net/api/addbook', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(obj)
    });
    console.log(res);
    let json = await res.json();
    console.log(json);
  } catch (err) {
    console.log(err);
  }
}

. 可以使用 finally{} 控制过程，如执行清理操作，如关闭文件、释放资源或记录日志；或者使用加载器；注意和 Promise 的 finally() 区别开来，虽然作用一致

async function getData() {
  container.classList.add('loading')
  try {

  } catch (err) {

  } finally{
    container.classList.remove('loading')
  }
}