完成的頁面也不少了，距離完賽剩３天，就不刻畫面了，先來串串api啦！

剛好可以把之前假資料的部分全部改為接api

首先需要安裝axios套件

axios是甚麼?

官方文件：axios 是一個基於 Promise 的 HTTP 客戶端，專門為瀏覽器和 node.js 服務

簡單來說就是一個api工具，可以在前端傳送/接收api到後端

安裝 axios

npm install axios

引用 axios 包

記得有使用新工具都要在main.js裡，引用package

import axios from 'axios'

使用 axios

官網有特別標註，在 CommonJS 中，如果要使用 axois 的方法或參數 ( ex: axios.)，記得要用 require() 去import axios

const axios = require('axios').default;

// axios.<method> will now provide autocomplete and parameter typings

axios 基本語法

這邊會介紹最常用到的 get / post

Get

get通常會用來跟後端拿取不需加密的資料，

get的參數會帶在url上，例如 http://127.0.0.1/user?ID=12345

axios.get('/user', {
    params: { // 如果有參數才需要加param，沒有的話可以不用寫
      ID: 12345
    }
  })
  .then(function (response) { // 成功後要做的事
    console.log(response);
  })
  .catch(function (error) { // 失敗後要做的事
    console.log(error);
  })
  .then(function () {      // 不管成功或失敗都要做的事
    // always executed
  });

另外也支援 async/await 語法

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Post

post通常用來傳遞比較重要的參數跟資料，跟get差別在於post不會把參數顯示在URL中，

像是登入的帳密就要用post才不會被看光光

axios.post('/user', { // 參數要用大括號包起來
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) { // 成功後要做的事
    console.log(response);
  })
  .catch(function (error) {  // 失敗後要做的事
    console.log(error);
  });

延伸閱讀

淺談 HTTP Method：表單中的 GET 與 POST 有什麼差別？ - Soul & Shell Blog

什麼是REST? 認識 RESTful API 路由語義化設計風格｜ALPHA Camp Blog

吐槽一下，axios的官方文件真的是蠻簡易的

只有短短幾句介紹跟一堆程式碼 ><

明天來做一個api 實例，gogo