ReactJS 入門 - 使用 fetchAPI 送出 HTTP 請求 - 筆記長也NotesHazuya

ReactJS 入門 - 使用 fetchAPI 送出 HTTP 請求

2021-07-29 13:32:00   ReactJS

關於送出 HTTP 請求

過去使用過 jQuery 的人可能會很直覺性想使用 AJAX 來送請求,但是由於我們已經使用了 react 的框架,通常不太會在特別去載入 jQuery 的函式庫,由於框架以及 jQuery 的渲染方式不太一樣,因此有關 jQuery 的渲染部分可能無法使用,因此建議如果只是為了要送出 HTTP 請求向 API 資料的話,可以使用本篇要介紹的 fetech API。

FetchAPI

fetchAPI 是 JavaScript 內建的一個 API ,使用時不必安裝或導入任何的 CDN。而 fetch 是一個非同步函數,可以透過 .then 來等待回應後再做其他事情。

基本用法

設定 method

fetch( requestUrl, {method: "GET"}) /*設定使用GET*/
    .then(res => res.json()) 
    .then(data => {
          /*接到request data後要做的事情*/
    })
    .catch(e => {
        /*發生錯誤*/
    })

比較常使用的兩種 http method 大概有 GET 以及 POST 兩種,通常 API 文件都會寫出要使用什麼方法,通常團隊內部也都會先前討論好。如果不了解有哪些 http method 的話可以參考: https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods

  • GET:常用於讀取資料
  • POST:一般用於傳送資料,表單傳送或是上傳檔案
  • PUT:用於更新資料
  • DELETE:用於刪除資料時

設定 headers

fetch( requestUrl, {
        method: "GET",
        headers: new Headers({
            'Content-Type': 'application/json',
        })
    })
    .then(res => res.json())
    .then(data => {
          //
    })
    .catch(e => {
        //
    })

關於 header 還有很多的參數可以設定,可以參考 MDN 的官方文件:https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Headers

設定 body

const data= { A:"A", B:"B" }

fetch( requestUrl, {
        method: "GET",
        body: JSON.stringify(data),   //把json變成字串
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    })
    .then(res => res.json())
    .then(data => {
          //
    })
    .catch(e => {
        //
    })

body 的格式通常配合 content-type 來提供,現在最常用的應該就是 json 的格式,這邊就不示範其他格式了。

實際範例

我們來取得他人 github 的公開 repository 列表, URL 格式是:https://api.github.com/users/使用者ID/repos

如果不知道要找抓誰的也可以抓我的(?):https://api.github.com/users/nnwa1689/repos

import React, { useState } from 'react';
const App = (props) => {
  const [repo, setRepo] = useState();
  const handleClick = () => {
    fetch( 'https://api.github.com/users/nnwa1689/repos',{method:"GET"})
    .then(res => res.json())
    .then(data => {
        setRepo(data[0]['name']);
    })
    .catch(e => {
        console.log(e);
    })
  }
  return (  
    <div className="App">
    <div className="data-display">
      {(repo===undefined) ? "目前還有沒有資料" : repo}
    </div>
    <button onClick={handleClick}>取得第一個repo</button>
    </div>
  );
};
export default App;

這個 API 使用 GET 方法取得資料,我們只拿出第一筆當中的 name 屬性。

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)