用 axios fetch data

成功從 port3001 取得 db.json 的資料後
一樣用 axios 從 react app 中呼叫用 json-server 模擬出來的 api

fetch .. then 後記得 .json()

如果用 fecth ... then 而不是 axios 的方法時，要記得對 response 執行 .json()，將 api 回傳內容格式轉為 json type

.then((response) => response.json())

axios 的話會自動幫你處理 response 格式的部分

1. 取 response 中的部分 data(array type)
2. 隨機產生一個索引值，取得 data 陣列內對應的值，
3. 執行 setResolution 將該值設定為 state 的 solution 的值

useEffect(() => {
    axios
      .get('http://localhost:3001/solutions')
      .then((response) => response.data)
      .then((jsonObj) => {
        const randIdx = Math.floor(Math.random() * (jsonObj.length + 1));
        setResolution(jsonObj[randIdx]);
      })
      .catch((error) => console.error(error));
  }, []);

題外話，成功 get data 時，看 terminal 會顯示 GET/200 或 GET/304
200 成功從伺服器取得資料

304 這個伺服器上的資源沒有變更，不需要重複讀取內容，用 cache 開啟