demoFetch.jsx

import "./App.css"
import { useState } from "react"

function App() {
  const [loading, setLoading] = useState(false)

  const demoFetch1 = () => {
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then((response) => {

        // 200-299
        if (response.ok === false) {
          throw new Error("Something went wrong")
        }

        return response.json()
      })
      .then((data) => console.log('Final data:', data))
      .catch((error) => console.warn('Problem:', error.message))
  }

  const demoFetch2 = async () => {
    try {
      setLoading(true)
      const response = await fetch("https://jsonplaceholder.typicode.com/asdlfkj")
      console.log(response)

      if (response.ok === false) {
        throw new Error("Something went wrong")
      }

      const data = await response.json()
      console.log(data)
    } catch(error) {
      console.warn('Problem:', error.message)
    }

    setLoading(false)
  }

  return (
    <>
      <div>
        <h1>Fetch</h1>
        {loading && "Loading..."}
        <button onClick={demoFetch2}>Try it</button>
      </div>
    </>
  )
}

export default App