iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

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

[Day 27] 串接Api axios基本用法

完成的頁面也不少了,距離完賽剩3天,就不刻畫面了,先來串串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


上一篇
[Day 26] 實作-節慶詳情頁面
下一篇
[Day 28] axios 這麼多API到底要放哪阿?
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

尚未有邦友留言

立即登入留言