React api 管理及應用 axios

    最近剛拿到 React 的 offer ，惡補一下，看六角的洧杰老師的文章提到最好是七成舊，三成新才比較容易聚焦問題避免整組壞光光不知道從何改起，或是進步太少，之前用 Vue Promise 處理 API 駕輕就熟，直到看到 Mike 的文章跟面試真的有人問有幾十隻 API 分散在不同 component 要怎麼處理，才拿這篇出來救駕，今天來實作如何用建立一個 JS 檔案的方式管理 API。

首先先建立拿來管理 API 的檔案 api.js

然後 import axios

import axios from 'axios';

建立不同大分類以及 baseUrl

const sixUrl = axios.create({

  baseURL: 'https://course-ec-api.hexschool.io/'

})

每個大分類下的不同分支 API

export const productList = () => sixUrl.get(`api/${uuid}/ec/products`)

uuid 是 get 六角 API 用的就不貼了，可依照各 API 權限控管進行調整。

回到需要使用的頁面，import api.js，並且選擇有 export 的 API

import { productList } from "./api";

透過 async await 完成 getData

function Home() {

  async function getData () {

    try {

      const item = await productList()

      console.log(item)

    } catch (err) {

      console.log(err)

    }

  }

  console.log(getData())

  return (

    <div>

      <h2>Home</h2>

    </div>

  );

}

console.log(item) 有資料就成功啦，基礎用法就到這邊，接下來要研究如何與 hook 一起使用作畫面更新。

參考資料：

Mike 的文章