如何在 Vue.js 中使用 axios 进行 HTTP 请求？

Vue.js 是一個建立在 JavaScript 框架上的前端框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個簡單的方法來進行 HTTP 請求，而 axios 是一個基於 Promise 的 HTTP 客戶端，可以用於發送請求。本文將介紹如何在 Vue.js 中使用 axios 來進行 HTTP 請求。

安裝 axios

首先，我們需要安裝 axios，可以使用 npm 或 yarn 來安裝：

npm install axios

yarn add axios

使用 axios 進行 HTTP 請求

一旦安裝完成，我們就可以在 Vue.js 中使用 axios 來進行 HTTP 請求。首先，我們需要在 Vue.js 中導入 axios：

import axios from 'axios';

然後，我們可以使用 axios 來發送 HTTP 請求：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的程式碼會發送一個 GET 請求到 /user?ID=12345，並在請求成功時顯示回應，在請求失敗時顯示錯誤訊息。

使用 axios 進行 POST 請求

除了 GET 請求之外，我們也可以使用 axios 來發送 POST 請求：

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

上面的程式碼會發送一個 POST 請求到 /user，並在請求成功時顯示回應，在請求失敗時顯示錯誤訊息。

總結

本文介紹了如何在 Vue.js 中使用 axios 來進行 HTTP 請求。axios 是一個基於 Promise 的 HTTP 客戶端，可以用於發送 GET 和 POST 請求。

更多資源

如果你想了解更多關於 axios 的資訊，可以參考以下資源：

Categorized in:

vuevue.js

Tagged in:

,