iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

30 天我與 Vue 的那些二三事系列 第 27

Day 27 - Vue 與 HTTP請求 (2)

前一天我們對HTTP有了基礎的概念,今天就要來談談要怎麼在vue中發送HTTP請求。
我們會引用axios這個函式庫。

什麼是axios

Axios 是一個基於 promise 的 HTTP 庫,應用於browser & node.js環境中,用於向後端發送請求。

axios有幾個特性:

  1. 從瀏覽器中建立 XMLHttpRequests
  2. 從 node.js 建立 http 請求
  3. 支援 Promise API
  4. 攔截請求和響應

安裝也十分簡單,透過前幾天介紹的npm便可以快速安裝進你的專案中:

npm install axios

那就來看看要怎麼使用Axios吧。

GET

params這個物件是用來傳遞query parameter,以下的網址等效於: http://請求地址?id=12345

axios
  .get("請求地址", {
    params: {
      id: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST

axios
  .post("請求地址", {
    firstName: "jkc",
    lastName: "123",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

then後面為若請求成功,接下來要採取的動作,像是跳轉網頁拉等等的行為,倘若發生錯誤,會被下一行的catch捕捉,就不會進到then後面了。


上一篇
Day 26 - Vue 與 HTTP請求 (1)
下一篇
Day 28 - Vue 與 HTTP請求 (3)
系列文
30 天我與 Vue 的那些二三事30

尚未有邦友留言

立即登入留言