实例演示 fetch / async / await 的使用场景 -

实例演示 fetch / async / await 的使用场景
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fetch/async/await</title>
  </head>
  <body>
    <script>
      fetch("https://jsonplaceholder.typicode.com/todos/5")
        .then(function (response) {
          return response.json();
        })
        .then(function (json) {
          console.log(json);
        });
      /**
       * 1. fetch(url): promise
       * 2. then: 调用响应对象的方法生成JSON数据(response.json())
       * 3. then: 拿到第二步的响应数据JSON,执行相关操作,例如 DOM
       */
      /**
       * 1. fetch(url): promise
       * 2. then: (response)=>response.json()
       * 3. then: (json)=>console.log(json)
       */
      // function 前添加 async , 转为异步函数
      async function getUser() {
        let url = "http://site.io/data.php?id=1";
        // 1. 等待结果再进行下一步操作,返回响应对象
        const response = await fetch(url);
        // 2. 将响应结果,转为json, json()
        const result = await response.json();
        console.log(result);
      }
    </script>
  </body>
</html>