TypeError no detectado: response.json no es una función en HTMLButtonElement

Question

Estoy atascado con esto, soy nuevo en el desarrollo web, cualquier ayuda sería muy apreciada. No puedo averiguar qué está mal en mi código, obtengo un error Uncaught TypeError: response.json no es una función

const getButton = document.querySelector('.get')
function getData(){
  const response = fetch("https://reqres.in/api/users");
  const data = response.json();
  console.log(data)
}
 getButton.addEventListener('click',getData)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button class="get">GET</button>
    </div>
    <script src="sandbox.js"></script>
</body>
</html>

Answer 1

Utilizando async/await

const getButton = document.querySelector('.get')

async function getData() {
  const response = await fetch("https://reqres.in/api/users");
  const data = await response.json();
  console.log(data)
}

getButton.addEventListener('click', getData)

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <button class="get">GET</button>
  </div>
  <script src="sandbox.js"></script>
</body>

</html>

Answer 2

Como se mencionó, fetch () es asincrónico. Prueba esto:

const getButton = document.querySelector('.get')
function getData(){
    const response = fetch("https://reqres.in/api/users")
        .then(function(data) {
            // This will run on on response from the server
            // AAA
            console.log(data);
        })
        .catch(function(error) {
            // Deal with errors here
        });
    // BBB
}
getButton.addEventListener('click',getData);

por lo que el código en BBB probablemente se ejecutará antes que el código en AAA