vue.js 发送 查询

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。在 Vue.js 中发送查询通常指的是向服务器发起 HTTP 请求以获取数据。这可以通过多种方式实现，包括使用浏览器内置的 fetch API 或第三方库如 Axios。

基础概念

HTTP 请求：HTTP（HyperText Transfer Protocol）是一种应用层协议，用于传输网页数据，包括 HTML、CSS、JavaScript 等文件。HTTP 请求分为几种类型，最常见的是 GET 和 POST。

• GET 请求：用于请求从服务器检索特定资源。
• POST 请求：用于向服务器提交要被处理的数据。

Axios：Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。它提供了简洁的 API 来发送 HTTP 请求。

优势

1. 分离关注点：将数据获取逻辑与组件渲染逻辑分离，使得代码更加清晰和易于维护。
2. 错误处理：可以统一处理请求过程中可能出现的错误。
3. 可复用性：可以将请求逻辑封装成函数或服务，在多个组件中复用。

类型

• 同步请求：阻塞后续代码执行，直到请求完成。
• 异步请求：不会阻塞后续代码执行，允许程序在等待响应时继续运行。

应用场景

• 数据初始化：在组件挂载后立即获取数据。
• 用户交互：响应用户的操作，如点击按钮后获取新数据。
• 实时更新：定期从服务器获取最新数据。

示例代码

以下是一个使用 Vue 3 和 Axios 发送 GET 请求的简单示例：

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const users = ref([]);

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/users');
        users.value = response.data;
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    });

    return { users };
  }
};
</script>

遇到的问题及解决方法

问题：请求失败，控制台显示跨域错误（CORS）。

原因：浏览器的安全策略阻止了从一个源到另一个源的请求。

解决方法：

1. 在服务器端设置适当的 CORS 头部，允许来自特定源或所有源的请求。
2. 使用代理服务器转发请求，避免直接从前端访问不同源的服务器。

示例：在 Vue CLI 创建的项目中，可以在 vue.config.js 文件中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

这样，当你在开发环境中发送 /api/users 请求时，它会被代理到 https://api.example.com/users。

请注意，以上代码和配置仅作为示例，实际使用时需要根据你的项目需求和环境进行调整。