目前用到的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都換上去!