问题：前端向后端发请求，返回res，打印res的值，使用await res.json()

首先打印res.json()发现返回值是对象，对象的内容是后端的一个异常处理返回的值，那么res.json()是怎么拿到这个值的？
答：不管是请求还是响应都能够包含body对象. body也可以是多种类型的实例.如：ArrayBuffer，ArrayBufferView，Blob，string，URLSearchParams，FormData。Body类定义了以下方法 (这些方法都被 Request和Response所实现)以获取body内容. 这些方法都会返回一个被解析后的promise对象和数据.，如：json()对象，所以这个值是后端返回给前端的，存在于body中。

res.json的作用呢？
答：res.json()的作用的是把请求的返回值的转化成json的格式。
可前面的await又做了什么？
当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。await可以认为是 async wait的简写，因此可以理解 async 用于声明一个function是异步的，而await用于等待一个异步方法执行完成返回的值(返回值可以是一个Promise对象或普通返回的值)。

await 的注意点有什么？

• await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try…catch 代码块中。
• await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。
• 在定义函数时我们使用了async关键字。await关键字只能在使用async定义的函数的内部使用。所有async函数都会返回一个promise，该promise最终resolve的值就是你在函数中return的内容。
• await 是等待async函数返回的Promise对象或其他值，await是一个运算符，用于组成表达式， 如果等待的是一个Promise对象，await会阻塞后面的代码（async调用不会造成堵塞，它内部所有的堵塞都被封装在一个Promise对象中异步执行），等待Promise对象的resolve，然后得到resolve的值，作为await表达式的运输结果。

import React from "react";

export default function UserList() {
  // 使用三个state分别保存用户列表，loading状态和错误状态
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState([null]);

  // 定义获取用户的回调函数
  const fetchUsers = async () => {
    setLoading(true);
    try {
      const res = await fetch("https://reqres.in/api/users/...");
      const json = await res.json();
      setUsers(json.data)
    }catch(err) {
      setError(err)
    }
    setLoading(false);
  };

  return (
    <div className="user-list">
      <button onClick={fetchUsers} disabled={loading}>
        {loading ? "Loading..." : "Show Users"}
      </button>
      {error && 
        <div style={{ color: "red" }}>Failed: {String(error)}</div>
      }
      <br/>
      <ul>
        {
          users.length > 0 && users.map((user) => {
            return <li key={user.id}>{user.first_name}</li>
          })
        }
      </ul>
    </div>
  )
}