在vue.js利用axios.create管理你的axios requests!

前言

雖然我在之前的許多專案，尤其是vanilla.js為主軸的專案中，若遇到需要第三方API的資料時我多半使用原生fetch來取得我想要的資料，但絕不是因為這是最理想的做法，僅是因為它是原生的方法，我自己平常到是比較傾向使用axios，今天就來簡單的介紹一下你要如何在vue.js中好好的利用axios實體幫助你管理你的眾多請求!

axios簡介

axios是一個基於promise的js library，主要用於各種HTTP請求。vue2.0的官方文件中也建議使用者利用axios取代舊的vue-request。axios具有以下的特點。

axios基本用法

首先自然不要忘記先安裝axios套件

npm i axios

一般來說如果你想在vue中使用axios，會有在全域使用以及在特定元件中使用，這邊我先介紹在元件中使用的做法，依照我目前的經歷，這是我比較常採用的方式。

為了示範，這次我將使用一個簡單的opensourse API-JSONplaceholder，假設今天我想擷取其中一篇文章的title，最基本的axios寫法可能就會如下。

// App.vue
<template>
  <div id="app">
    <button @click="fetch">Fetch data</button>
    <h1>The title is {{title}}</h1>
  </div>
</template>
<script>

import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      fetchedData: null,
      title: ''
    }
  },
  methods: {
    fetch() {
      axios
        .get('https://jsonplaceholder.typicode.com/todos/1')
        .then(data => {
          this.fetchedData = data
        })
    }
  }
}
</script>

這麼做當然沒有什麼不好，不過想像一下，假設今天你在不同的元件中都是向同一個後端伺服器做類似的請求，光是相同的baseURL你就不知道要重複多少次，況且今天要是伺服器的位置需要做更換，那你豈不是要一個一個修正嗎?很明顯這存在著更好用的方法-創建axios實體。

創建axios實體

首先我會在src的目錄下創建utils資料夾，並在其中新建立一個api_helper.js的檔案，命名部份我看過蠻多做法，這邊我先暫時堅持我目前所學😁

src/utils/api_helper.js

import axios from 'axios';

// 告訴axios你創立的實體要以什麼作為baseURL，特別注意URL需要大寫，這是axios的屬性之一
const baseURL = 'https://jsonplaceholder.typicode.com'
const axiosInstance = axios.create({
  baseURL
})

// 輸出你所創立的axios實體
export const apiHelper = axiosInstance

所謂的實體你可以把它想成一般我們在做請求時前面不更動的baseURL，也就是說後續我們利用apiHelper發出的各種請求都會統一發送到你所設定的baseURL之下，再根據你傳入的參數做調整，現在我們已經建好axios實體，趕快看一下要怎麼利用這個實體做request吧!

創建apis資料夾做集中管理

當然你可以直接在元件中使用我們剛建立的實體，但很多時候一個後端API會分成好幾十條路由，一般來說我們會希望路由集中管理，方便我們後續維護，前端這邊我也會堅持類似的作法，所以首先我們在src下創立一個apis資料夾，並建立todo_api.js檔案來管理所有與todo相關的路由!

src/apis/todo_api.js

import { apiHelper } from '../utils/api_helper.js'

export default {
  todos: {
    get() {
      return apiHelper.get(`/todos/1`)
    }
  }
}

目前我只在todos內有一個get method，理論上來說下方還會有edit、delete之類的功能，不過今天作為示範就請大家將就一下~!現在與todo相關的HTTP request我們都集中管理在todo_api.js這個檔案中，是時候在我們的元件中使用囉!

再次在元件中使用axios

再次回到我們的App.vue，此時第一步要做的事情便是清空我們剛剛寫的dummy code，並引入辛辛苦苦建立的todo_api.js檔案。

<script>
import todoAPI from './apis/todo_api.js'

export default {
  name: 'App',
  data() {
    return {
      fetchedData: null,
      title: ''
    }
  },
  methods: {
    async fetch() {
      const data = await todoAPI.todos.get()
      this.fetchedData = data
      this.title = data.data.title
    }
  },
}
</script>

結語

經過以上的操作，我們就再次重現完全相同的結果!雖然看起來像是繞了大遠路，不過今天要是我們想修改baseURL或是做一些相關的微調都會輕鬆很多，當然axios還有很多其他的設定，比方說config也是個很實用的設定~不過這個就下次再介紹囉!

參考文章

axios 基本使用 & Config
使用Axios你的API都怎麼管理？