iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 28

[Day 28] axios 這麼多API到底要放哪阿?

目前用到的api

前一篇有介紹axios的基本操作了,我先整理一下目前每個頁面用到的api

HomePage 首頁
- 圖片輪播
- 熱門排行榜(免費、付費)

TopicPage 主題推薦
- 主題清單

FestivalPage 節慶活動
- 節慶清單

FestivalDetailPage 節慶詳細頁面
- 節慶詳細資料

光是這些簡單的功能就需要5支api,可以想像當功能愈複雜、系統愈龐大,api的數量也會更多

api 到底要放哪?

想像一下,如果今天我想要把熱門排行榜顯示在每個頁面,是不是在每一頁都要加上api?

那如果我今天突然想修改api名稱,或是參數名稱呢?

是不是要去找這支api用在哪裡,然後再一頁一頁去更改?

//此為範例
axios.get('http://127.0.0.1/api/bookList', {
    params: { 
      pageIndex: 1,
			pageSize: 20,
    }
  })
  .then(function (response) { // 成功後要做的事
    console.log(response);
  })
  .catch(function (error) { // 失敗後要做的事
    console.log(error);
  });

或是像我之後有一部分的api要從open api拿,另外一半的api要從後端拿,修改時就還要去判斷網址,想一想就覺得挺麻煩的

建立實例 axios.create

那為了避免這樣的狀況,我習慣會把api從頁面獨立出來,

讓每一頁只需要引用api方法,帶上參數就好,不用管這隻api是要戳哪個url。

axios 這邊提供了一個方法 The Axios Instance,可以使用自定義配置建立實例 (Instance)

const 實例名稱 = axios.create({
	//這邊放要共用的 request config
});

// 官方範例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', //api的前綴網址
  timeout: 1000,                          // api timeout時間
  headers: {'X-Custom-Header': 'foobar'} // api header要帶的參數
});

request Config (api參數)

官方定義了很多種,不過比較常用到的就是那幾個,可以參考官方文件

baseURL 就是api的前綴網址,使用時後面會再串接不同的 request url

在實例中的參數,會跟使用api時帶的參數合併

以下是這個實例可以使用的方法,比較常用的就是get、post

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

// When using the alias methods url, method, and data properties don't need to be specified in config.

使用實例的方法

寫個範例比較好懂,使用時只有 url 是必要的,其他的參數都可以不用帶

// 1. get
// 要連到 https://some-domain.com/api/bookList?page=5
instance.get('/bookList',{
    page: "5",
}.then(res=> {
    console.log(res);
})

// 2. post
// 要連到 https://some-domain.com/api/login
// 並帶上參數 account 跟 password
instance.post('/login',{
    account: "user666",
    password: "123456789"
}.then(res=> {
    console.log(res);
})

再更簡化一點可不可以?

那可能有人會想說~

這樣我還是要每頁都放url阿,還不是一樣

沒錯!

所以在 api的頁面用axios.create() 建立實例後,要再把它封裝成一個方法,

裡面直接就包含需要的request config了

直接看範例

//api.js
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', //api的前綴網址
});
export const getBookList = data => instance.get('/bookList', data);

// 封裝成 getBookList後,到vue頁面呼叫方法
// BookListPage.vue
import { getBookList } from '../api/api';
getBookList ({
    page: 5,
})
.then(res=> {
    console.log(res);
})

這樣就真的把api集中管理了,如果要改url 只要在api.js調整即可

當系統功能很多時,這個就會大大的降低維護的困擾


推薦閱讀

使用Axios時你的API都怎麼管理?


axios的用法介紹差不多到這啦~

他其實還有蠻多參數可以研究的,不過這邊用不到就先不提

目前提到的這些用法應該可以滿足大部分需求了

那明天就來把api都換上去!


上一篇
[Day 27] 串接Api axios基本用法
下一篇
[Day 29] 實作-axios 串接api
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

2 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:31:55

恭喜即將邁入完賽階段~

0
Tilda
iT邦新手 5 級 ‧ 2021-10-14 16:49:23

我要留言

立即登入留言