首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue HTTP接口调用和Vue示例

Vue中的HTTP接口调用和Vue示例解读

2026-03-26 09:31:03 作者：钝挫力PROGRAMER

这篇文章主要介绍了Vue中的HTTP接口调用和Vue示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

方案

在 Vue 中，可以根据项目需求和个人偏好选择以下方式：

Axios：一个功能丰富的基于 Promise 的 HTTP 客户端，在浏览器和 Node.js 中均可使用。
Fetch API：浏览器原生的现代化网络 API，无需安装额外库。

它们的主要区别如下：

特性	Axios	Fetch API
易用性	API 友好，使用简单	较为底层，需更多代码
错误处理	自动处理 HTTP 错误状态（如 404、500）	需手动检查 response.ok 或 response.status
请求/响应拦截器	支持	不支持
浏览器兼容性	支持较老版本浏览器	仅支持现代浏览器
安装和引入	需要安装并引入	内置，不需要安装和引入
默认JSON转换	是	否，需手动调用 .json() 方法
取消请求	支持	不支持

一般建议：

对于大多数项目，推荐使用 Axios，因为它提供了更简洁的API和更强大的功能（如拦截器、自动JSON转换、更好的错误处理）。

如果项目追求轻量级且仅面向现代浏览器，可以考虑使用 Fetch API。

安装与引入 Axios

若选择使用 Axios，首先需要安装它：

npm install axios

然后，在 Vue 组件中引入：

import axios from 'axios';

也可以选择全局配置 Axios，例如设置基础 URL：

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

axios.defaults.baseURL = 'https://api.example.com'; // 设置基础 URL
Vue.prototype.$axios = axios; // 可选：将其添加到 Vue 原型链上，以便在组件中使用 this.$axios

发送各类请求

使用 Axios 和 Fetch API 发送 POST、GET、PUT、DELETE 请求的具体方法。

1. POST 请求

POST 请求通常用于向服务器提交数据，例如创建新资源。

使用 Axios 发送 POST 请求：

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

使用 Fetch API 发送 POST 请求：

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 告诉服务器你发送的是 JSON 数据
  },
  body: JSON.stringify({ // 将 JavaScript 对象转换为 JSON 字符串
    name: 'John Doe',
    email: 'john@example.com'
  })
})
.then(response => response.json()) // 将响应解析为 JSON
.then(data => {
  console.log('创建成功：', data);
})
.catch(error => {
  console.error('创建失败：', error);
});

2. GET 请求

GET 请求用于从服务器获取数据。

使用 Axios 发送 GET 请求：

axios.get('https://api.example.com/users')
.then(response => {
  console.log('获取到的数据：', response.data);
})
.catch(error => {
  console.error('获取数据失败：', error);
});

使用 Fetch API 发送 GET 请求：

fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => {
  console.log('获取到的数据：', data);
})
.catch(error => {
  console.error('获取数据失败：', error);
});

传递查询参数：

使用 Axios 时，可以通过 params 选项传递参数：

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

使用 Fetch API 时，需要手动构建查询字符串：

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

3. PUT 请求

PUT 请求通常用于完整更新服务器上的已有资源。

使用 Axios 发送 PUT 请求：

axios.put('https://api.example.com/users/1', { // 假设更新 ID 为 1 的用户
  name: 'Jane Doe',
  email: 'jane@example.com'
})
.then(response => {
  console.log('更新成功：', response.data);
})
.catch(error => {
  console.error('更新失败：', error);
});

使用 Fetch API 发送 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 请求用于删除服务器上的资源。

使用 Axios 发送 DELETE 请求：

axios.delete('https://api.example.com/users/1') // 假设删除 ID 为 1 的用户
.then(response => {
  console.log('删除成功：', response.data);
})
.catch(error => {
  console.error('删除失败：', error);
});

使用 Fetch API 发送 DELETE 请求：

fetch('https://api.example.com/users/1', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('删除成功');
  } else {
    console.log('删除失败，状态码：', response.status);
  }
})
.catch(error => {
  console.error('删除失败：', error);
});

Axios进阶使用

Axios 的拦截器

Axios 的拦截器允许在请求发送前或响应返回后统一处理。

请求拦截器（例如：为所有请求添加 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);
});

响应拦截器（例如：统一处理错误）：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 处理未授权错误，例如跳转到登录页
    console.log('未经授权，请重新登录');
  }
  return Promise.reject(error);
});

处理异步请求

在上述示例中，主要使用了 .then().catch() 的 Promise 语法。在 Vue 组件中，也可以结合 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>
    <!-- 创建用户 -->
    <form @submit.prevent="createUser">
      <input v-model="newUser.name" placeholder="姓名">
      <input v-model="newUser.email" placeholder="邮箱">
      <button type="submit">创建</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);
      }
    },

    // 创建用户 (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('创建用户失败:', 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; // 关闭编辑表单
      } 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 }; // 创建副本以避免直接修改
    },
    cancelEdit() {
      this.editingUser = null;
    }
  }
};
</script>

注意事项

错误处理：务必为所有网络请求添加错误处理，以便向用户提供反馈并增强应用健壮性。
跨域问题 (CORS)：如果前端与后端API在不同域名下，可能会遇到跨域问题。需要在后端配置 CORS，或在开发时利用 Vue CLI 的代理功能。
安全性：处理用户输入时，请注意防范 XSS 等安全风险。避免直接将用户输入插入DOM。
性能优化：对于频繁触发请求的场景（如搜索框），可以考虑使用防抖（debounce）技术减少请求次数。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。