如果我們希望在fetch data的空檔，顯示Loading…的字樣，可以使用useState加上邏輯，

例如 ispending被設為true時顯示Loading ，成功fetch data則將setisPending設為false，就不會顯示。

const [isPending, setIsPending] = useState(true);

useEffect(() => {
      fetch('http://localhost:8000/blogs')
      .then(data => {
        setIsPending(false);
        setBlogs(data);
      })
  }, [])
return(
    { isPending && <div>Loading...</div> }
);

我們也需要對例外狀況進行處理，這裡第一段.then()，res.ok檢查回應狀態碼是否在成功範圍（200-299）內。如果不是，則拋出一個錯誤，表示無法取得資料。

第二段then()，表示如果回應正確，將解析後的資料設定到 blogs 。.

最後的catch()會收到錯誤訊息，並顯示fail to fetch，但這裡我們將自己打的錯誤訊息存進setError裡，再用usestate加邏輯的方式去顯示。

  useEffect(() => {
 
      fetch('http://localhost:8000/blogs')
      .then(res => {
        if (!res.ok) { // error coming back from server
          throw Error('could not fetch the data for that resource');
        } 
        return res.json();
      })
      .then(data => {
        setBlogs(data);
      })
      .catch(err => {
        // auto catches network / connection error
        setError(err.message);
      })
  }, [])

res和err是使用 fetch時的回應物件，我們可以進一步使用他們的屬性，例如
• res 通常是指回應（Response）物件，代表網路請求的回應。可以透過 res 存取回應的資料、狀態碼、標頭等。
• err 通常是指錯誤（Error）物件，代表可能發生的錯誤。當網路請求失敗或遇到其他錯誤時，會生成一個錯誤物件，開發者可以捕獲這個錯誤物件並處理錯誤情況。

參考資料

Net ninja