To-Do Calendar - Day15 實作查詢列表功能（下）- 用 Axios Instance 管理 API

2022/05/29
2-minute read
SideProject

上篇的 API 串接還不算完成，因為直接將 URL 寫死在程式中的做法不太好，如果今天 API 的路徑有異動，就必須把散落在各組件的 API 找出來修改，不易於後續維護。接下來將會透過 Axios Instance 來統一管理 API。

用 Axios Instance 管理 API 的好處？

集中設定 Request Config
支援攔截器，可在 then/catch 前做額外處理
封裝 API 易於管理

作法如下：

使用 axios.create 建立 axios instance

建立 api 資料夾，並在裡面建立 index.js 檔案，並 import axios

使用 axios.create 建立一個實體，裡面放進 Request 的相關設定屬性（詳細設定請參考官方說明）

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:8080",
  headers: { "Content-Type": "application/json" }
});

宣告 API 方法

使用 instance 變數去做 http method，然後再 export 出去給外面的組件 import

// Habits 相關的 API
export const apiHabitsQuery = (data) => instance.get(`/users/${data.userId}/habits`);

設置攔截器

Request Interceptors

instance.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

Response Interceptors

instance.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response;
  },
  function (error) {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          alert("你要找的頁面不存在");
          // go to 404 page
          break;
        case 500:
          alert("伺服器錯誤");
          // go to 500 page
          break;
        default:
          console.log(error.message);
      }
    }
    if (!window.navigator.onLine) {
      alert("網路出了點問題，請重新連線後重整網頁");
      return;
    }
    return Promise.reject(error);
  }
);

在組件中呼叫 API

在 habitTracker.vue import apiHabitsQuery

import { apiHabitsQuery } from "../../api/index.js";
...
mounted() {
  apiHabitsQuery("user01").then((res) => {
    console.log(res.data);
    this.habitList = res.data.habitList;
  });
},

運行結果

userId 為測試資料的 user01
userId 為不存在的 user02，alert 有出現「你要找的頁面不存在」訊息，視情況可導向首頁或404頁面

攔截器的好處：集中管理錯誤處理，便於日後維護

API 從前端開發到後端實作再到串接算是整個流程跑過一輪了～接下來就可以來衝刺進度啦╭( ･ㅂ･)و