Vue中的HTTP接口調(diào)用和Vue示例解讀

更新時間：2026年03月26日 09:31:02 作者：鈍挫力PROGRAMER

這篇文章主要介紹了Vue中的HTTP接口調(diào)用和Vue示例,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

方案

在 Vue 中，可以根據(jù)項目需求和個人偏好選擇以下方式：

Axios：一個功能豐富的基于 Promise 的 HTTP 客戶端，在瀏覽器和 Node.js 中均可使用。
Fetch API：瀏覽器原生的現(xiàn)代化網(wǎng)絡(luò) API，無需安裝額外庫。

它們的主要區(qū)別如下：

特性	Axios	Fetch API
易用性	API 友好，使用簡單	較為底層，需更多代碼
錯誤處理	自動處理 HTTP 錯誤狀態(tài)（如 404、500）	需手動檢查 response.ok 或 response.status
請求/響應(yīng)攔截器	支持	不支持
瀏覽器兼容性	支持較老版本瀏覽器	僅支持現(xiàn)代瀏覽器
安裝和引入	需要安裝并引入	內(nèi)置，不需要安裝和引入
默認(rèn)JSON轉(zhuǎn)換	是	否，需手動調(diào)用 .json() 方法
取消請求	支持	不支持

一般建議：

對于大多數(shù)項目，推薦使用 Axios，因為它提供了更簡潔的API和更強大的功能（如攔截器、自動JSON轉(zhuǎn)換、更好的錯誤處理）。

如果項目追求輕量級且僅面向現(xiàn)代瀏覽器，可以考慮使用 Fetch API。

安裝與引入 Axios

若選擇使用 Axios，首先需要安裝它：

npm install axios

然后，在 Vue 組件中引入：

import axios from 'axios';

也可以選擇全局配置 Axios，例如設(shè)置基礎(chǔ) URL：

// 在 main.js 或類似入口文件中
import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com'; // 設(shè)置基礎(chǔ) URL
Vue.prototype.$axios = axios; // 可選：將其添加到 Vue 原型鏈上，以便在組件中使用 this.$axios

發(fā)送各類請求

使用 Axios 和 Fetch API 發(fā)送 POST、GET、PUT、DELETE 請求的具體方法。

1. POST 請求

POST 請求通常用于向服務(wù)器提交數(shù)據(jù)，例如創(chuàng)建新資源。

使用 Axios 發(fā)送 POST 請求：

axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
.then(response => {
  console.log('創(chuàng)建成功：', response.data);
})
.catch(error => {
  console.error('創(chuàng)建失敗：', error);
});

使用 Fetch API 發(fā)送 POST 請求：

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 告訴服務(wù)器你發(fā)送的是 JSON 數(shù)據(jù)
  },
  body: JSON.stringify({ // 將 JavaScript 對象轉(zhuǎn)換為 JSON 字符串
    name: 'John Doe',
    email: 'john@example.com'
  })
})
.then(response => response.json()) // 將響應(yīng)解析為 JSON
.then(data => {
  console.log('創(chuàng)建成功：', data);
})
.catch(error => {
  console.error('創(chuàng)建失?。?, error);
});

2. GET 請求

GET 請求用于從服務(wù)器獲取數(shù)據(jù)。

使用 Axios 發(fā)送 GET 請求：

axios.get('https://api.example.com/users')
.then(response => {
  console.log('獲取到的數(shù)據(jù)：', response.data);
})
.catch(error => {
  console.error('獲取數(shù)據(jù)失?。?, error);
});

使用 Fetch API 發(fā)送 GET 請求：

fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => {
  console.log('獲取到的數(shù)據(jù)：', data);
})
.catch(error => {
  console.error('獲取數(shù)據(jù)失?。?, error);
});

傳遞查詢參數(shù)：

使用 Axios 時，可以通過 params 選項傳遞參數(shù)：

axios.get('https://api.example.com/users', {
  params: {
    role: 'admin',
    active: true
  }
})

使用 Fetch API 時，需要手動構(gòu)建查詢字符串：

const params = new URLSearchParams({ role: 'admin', active: true });
fetch(`https://api.example.com/users?${params}`)

3. PUT 請求

PUT 請求通常用于完整更新服務(wù)器上的已有資源。

使用 Axios 發(fā)送 PUT 請求：

axios.put('https://api.example.com/users/1', { // 假設(shè)更新 ID 為 1 的用戶
  name: 'Jane Doe',
  email: 'jane@example.com'
})
.then(response => {
  console.log('更新成功：', response.data);
})
.catch(error => {
  console.error('更新失?。?, error);
});

使用 Fetch API 發(fā)送 PUT 請求：

fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Jane Doe',
    email: 'jane@example.com'
  })
})
.then(response => response.json())
.then(data => {
  console.log('更新成功：', data);
})
.catch(error => {
  console.error('更新失敗：', error);
});

4. DELETE 請求

DELETE 請求用于刪除服務(wù)器上的資源。

使用 Axios 發(fā)送 DELETE 請求：

axios.delete('https://api.example.com/users/1') // 假設(shè)刪除 ID 為 1 的用戶
.then(response => {
  console.log('刪除成功：', response.data);
})
.catch(error => {
  console.error('刪除失?。?, error);
});

使用 Fetch API 發(fā)送 DELETE 請求：

fetch('https://api.example.com/users/1', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('刪除成功');
  } else {
    console.log('刪除失敗，狀態(tài)碼：', response.status);
  }
})
.catch(error => {
  console.error('刪除失?。?, error);
});

Axios進階使用

Axios 的攔截器

Axios 的攔截器允許在請求發(fā)送前或響應(yīng)返回后統(tǒng)一處理。

請求攔截器（例如：為所有請求添加 token）：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken'); // 從本地存儲獲取 token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

響應(yīng)攔截器（例如：統(tǒng)一處理錯誤）：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 處理未授權(quán)錯誤，例如跳轉(zhuǎn)到登錄頁
    console.log('未經(jīng)授權(quán)，請重新登錄');
  }
  return Promise.reject(error);
});

處理異步請求

在上述示例中，主要使用了 .then().catch() 的 Promise 語法。在 Vue 組件中，也可以結(jié)合 async/await 語法來處理異步請求，使代碼更清晰：

export default {
  methods: {
    async fetchUser() {
      try {
        const response = await axios.get('https://api.example.com/users/1');
        this.user = response.data;
      } catch (error) {
        console.error('獲取用戶失敗:', error);
      }
    }
  }
}

Vue示例：一個簡單的用戶管理

下面是一個在 Vue 組件中使用 Axios 進行增刪改查操作的簡單示例：

vue

<template>
  <div>
    <!-- 創(chuàng)建用戶 -->
    <form @submit.prevent="createUser">
      <input v-model="newUser.name" placeholder="姓名">
      <input v-model="newUser.email" placeholder="郵箱">
      <button type="submit">創(chuàng)建</button>
    </form>

    <!-- 用戶列表 -->
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="editUser(user)">編輯</button>
        <button @click="deleteUser(user.id)">刪除</button>
      </li>
    </ul>

    <!-- 編輯用戶 -->
    <div v-if="editingUser">
      <h3>編輯用戶</h3>
      <form @submit.prevent="updateUser">
        <input v-model="editingUser.name" placeholder="姓名">
        <input v-model="editingUser.email" placeholder="郵箱">
        <button type="submit">更新</button>
        <button @click="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newUser: { name: '', email: '' },
      users: [],
      editingUser: null
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    // 獲取用戶列表 (GET)
    async fetchUsers() {
      try {
        const response = await axios.get('https://api.example.com/users');
        this.users = response.data;
      } catch (error) {
        console.error('獲取用戶列表失敗:', error);
      }
    },

    // 創(chuàng)建用戶 (POST)
    async createUser() {
      try {
        const response = await axios.post('https://api.example.com/users', this.newUser);
        this.users.push(response.data);
        this.newUser = { name: '', email: '' }; // 重置表單
      } catch (error) {
        console.error('創(chuàng)建用戶失敗:', error);
      }
    },

    // 更新用戶 (PUT)
    async updateUser() {
      try {
        const response = await axios.put(`https://api.example.com/users/${this.editingUser.id}`, this.editingUser);
        const index = this.users.findIndex(user => user.id === this.editingUser.id);
        this.users.splice(index, 1, response.data);
        this.editingUser = null; // 關(guān)閉編輯表單
      } catch (error) {
        console.error('更新用戶失敗:', error);
      }
    },

    // 刪除用戶 (DELETE)
    async deleteUser(userId) {
      try {
        await axios.delete(`https://api.example.com/users/${userId}`);
        this.users = this.users.filter(user => user.id !== userId);
      } catch (error) {
        console.error('刪除用戶失敗:', error);
      }
    },

    // 輔助方法
    editUser(user) {
      this.editingUser = { ...user }; // 創(chuàng)建副本以避免直接修改
    },
    cancelEdit() {
      this.editingUser = null;
    }
  }
};
</script>

注意事項

錯誤處理：務(wù)必為所有網(wǎng)絡(luò)請求添加錯誤處理，以便向用戶提供反饋并增強應(yīng)用健壯性。
跨域問題 (CORS)：如果前端與后端API在不同域名下，可能會遇到跨域問題。需要在后端配置 CORS，或在開發(fā)時利用 Vue CLI 的代理功能。
安全性：處理用戶輸入時，請注意防范 XSS 等安全風(fēng)險。避免直接將用戶輸入插入DOM。
性能優(yōu)化：對于頻繁觸發(fā)請求的場景（如搜索框），可以考慮使用防抖（debounce）技術(shù)減少請求次數(shù)。