Vue 3中Fetch API数据获取与下拉菜单动态填充的实践指南-js教程-PHP中文网

Vue 3中Fetch API数据获取与下拉菜单动态填充的实践指南

本文深入探讨了vue 3应用中通过fetch api获取数据并动态填充下拉菜单时遇到的常见问题及解决方案。重点讲解了如何正确处理api返回的数组结构数据，通过数据转换（如使用`map`和`set`）提取并去重所需字段，以适配组件的渲染需求，确保下拉菜单能够正确显示数据。

在Vue 3开发中，从后端API获取数据并将其渲染到前端UI组件（如下拉菜单）是常见的需求。然而，API返回的数据结构往往不直接与前端组件的期望格式匹配，这就需要进行适当的数据转换。本文将以一个具体的案例为例，详细阐述如何解决Fetch API获取数据后，下拉菜单未能正确填充的问题。

1. 问题描述与初步尝试

假设我们有一个Vue 3组件，旨在从一个交通事件API获取数据，并根据事件的“原因”、“条件”和“事件类型”来填充三个独立的下拉菜单。API接口（例如：https://eapps.ncdot.gov/services/traffic-prod/v1/incidents?verbose=true）返回的是一个事件记录的数组，每条记录都包含reason、condition和incidentType等字段。

初始的Vue组件代码可能如下所示：

<template>
  <div>
    <div>to wit: {{ dropdownData }}</div>
    <select v-model="reason">
      <option v-for="r in dropdownData.reasons" :value="r">{{ r }}</option>
    </select>
    <select v-model="condition">
      <option v-for="c in dropdownData.conditions" :value="c">{{ c }}</option>
    </select>
    <select v-model="incidentType">
      <option v-for="type in dropdownData.incidentTypes" :value="type">{{ type }}</option>
    </select>
    <button @click="getData">Get Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: null,
      condition: null,
      incidentType: null,
      dropdownData: {
        reasons: [],
        conditions: [],
        incidentTypes: []
      }
    }
  },
  mounted() {
    this.fetchDropdownData()
  },
  methods: {
    fetchDropdownData() {
      fetch(`${import.meta.env.VITE_API_VERBOSE}`)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.json()
        })
        .then((data) => {
          // 初始尝试：直接赋值
          this.dropdownData = {
            reasons: [...data.reasons], // 假设data中直接有reasons数组
            conditions: [...data.conditions],
            incidentTypes: [...data.incidentTypes]
          }
        })
        .catch((error) => {
          console.error('Error:', error)
        })
    },
    getData() {
      // 使用选中的值进行后续操作
    }
  }
}
</script>

登录后复制

尽管Fetch API调用成功并返回了数据（例如418条记录），但下拉菜单却未能填充。dropdownData对象在模板中显示为空数组。

立即学习“前端免费学习笔记（深入）”；

2. 问题分析：API数据结构与组件期望不符

问题的核心在于API返回的数据结构与组件中dropdownData的期望结构不匹配。API返回的data是一个数组，例如：

[
  { "id": 1, "reason": "Accident", "condition": "Wet", "incidentType": "Collision" },
  { "id": 2, "reason": "Construction", "condition": "Dry", "incidentType": "Roadwork" },
  { "id": 3, "reason": "Accident", "condition": "Icy", "incidentType": "Collision" }
  // ... 更多事件对象
]

登录后复制

而我们的dropdownData期望的是一个包含reasons、conditions、incidentTypes等属性的对象，每个属性的值都是一个包含所有唯一选项的数组，例如：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

{
  "reasons": ["Accident", "Construction"],
  "conditions": ["Wet", "Dry", "Icy"],
  "incidentTypes": ["Collision", "Roadwork"]
}

登录后复制

因此，this.dropdownData = { reasons: [...data.reasons], ... } 这样的代码会失败，因为data本身是一个数组，而不是一个直接包含reasons、conditions等属性的对象。我们需要从data数组中的每个事件对象里提取相应的字段，并进行去重处理。

3. 解决方案：数据转换与去重

为了解决这个问题，我们需要在fetchDropdownData方法中对API返回的data进行转换。具体步骤如下：

提取所有相关字段： 使用Array.prototype.map()方法遍历data数组，从每个事件对象中提取reason、condition和incidentType字段，生成各自的原始列表。
去重处理： 由于下拉菜单选项通常需要是唯一的，我们可以使用Set数据结构来自动去除重复的值。将map生成的结果转换为Set，然后再转换回数组。

修改后的fetchDropdownData方法如下：

// ... (之前的代码)

    fetchDropdownData() {
      fetch(`${import.meta.env.VITE_API_VERBOSE}`)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.json()
        })
        .then((data) => {
          // 确保data是数组，并进行数据转换
          if (Array.isArray(data)) {
            const reasons = [...new Set(data.map(item => item.reason))];
            const conditions = [...new Set(data.map(item => item.condition))];
            const incidentTypes = [...new Set(data.map(item => item.incidentType))];

            this.dropdownData = {
              reasons: reasons.filter(Boolean), // 过滤掉可能的undefined或null值
              conditions: conditions.filter(Boolean),
              incidentTypes: incidentTypes.filter(Boolean)
            };
          } else {
            console.warn('API returned data is not an array:', data);
            // 可以根据实际情况处理非数组数据，例如清空下拉菜单数据
            this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
          }
        })
        .catch((error) => {
          console.error('Error fetching dropdown data:', error);
          // 在错误发生时，清空下拉菜单数据或显示错误信息
          this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
        })
    },

// ... (后续代码)

登录后复制

4. 完整的Vue组件代码

结合上述修正，完整的Vue 3组件代码如下：

<template>
  <div>
    <h2>交通事件数据筛选</h2>
    <p>当前下拉菜单数据预览: {{ dropdownData }}</p>

    <div class="filter-controls">
      <label for="reason-select">选择原因:</label>
      <select id="reason-select" v-model="reason">
        <option :value="null">-- 请选择 --</option>
        <option v-for="r in dropdownData.reasons" :key="r" :value="r">{{ r }}</option>
      </select>
    </div>

    <div class="filter-controls">
      <label for="condition-select">选择条件:</label>
      <select id="condition-select" v-model="condition">
        <option :value="null">-- 请选择 --</option>
        <option v-for="c in dropdownData.conditions" :key="c" :value="c">{{ c }}</option>
      </select>
    </div>

    <div class="filter-controls">
      <label for="incident-type-select">选择事件类型:</label>
      <select id="incident-type-select" v-model="incidentType">
        <option :value="null">-- 请选择 --</option>
        <option v-for="type in dropdownData.incidentTypes" :key="type" :value="type">{{ type }}</option>
      </select>
    </div>

    <button @click="getData">根据选择获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: null,
      condition: null,
      incidentType: null,
      dropdownData: {
        reasons: [],
        conditions: [],
        incidentTypes: []
      }
    }
  },
  mounted() {
    // 组件挂载时立即获取数据填充下拉菜单
    this.fetchDropdownData()
  },
  methods: {
    async fetchDropdownData() {
      try {
        // 使用环境变量获取API URL，增强可配置性
        const response = await fetch(`${import.meta.env.VITE_API_VERBOSE}`);

        if (!response.ok) {
          throw new Error(`Network response was not ok: ${response.statusText}`);
        }

        const data = await response.json();

        if (Array.isArray(data)) {
          // 提取并去重各个字段的值
          const reasons = [...new Set(data.map(item => item.reason))];
          const conditions = [...new Set(data.map(item => item.condition))];
          const incidentTypes = [...new Set(data.map(item => item.incidentType))];

          // 更新响应式数据
          this.dropdownData = {
            reasons: reasons.filter(Boolean), // 过滤掉可能的undefined/null值
            conditions: conditions.filter(Boolean),
            incidentTypes: incidentTypes.filter(Boolean)
          };
        } else {
          console.warn('API returned data is not an array. Expected an array of incidents.');
          this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
        }
      } catch (error) {
        console.error('Error fetching dropdown data:', error);
        // 在错误发生时，清空下拉菜单数据或显示错误信息
        this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
      }
    },
    getData() {
      // 此方法用于根据当前选中的下拉菜单值进行进一步操作
      console.log('Selected Reason:', this.reason);
      console.log('Selected Condition:', this.condition);
      console.log('Selected Incident Type:', this.incidentType);
      // 例如：根据这些值再次调用API过滤数据，或更新地图显示
      alert(`已选择：原因 - ${this.reason}, 条件 - ${this.condition}, 类型 - ${this.incidentType}`);
    }
  }
}
</script>

<style scoped>
.filter-controls {
  margin-bottom: 15px;
}
label {
  margin-right: 10px;
  font-weight: bold;
}
select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  min-width: 150px;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
button:hover {
  background-color: #0056b3;
}
</style>

登录后复制

注意事项：

异步操作处理： 在mounted生命周期钩子中调用fetchDropdownData是常见的做法，确保组件挂载后立即获取数据。使用async/await可以使异步代码更易读和维护。
错误处理： 务必在fetch操作中包含.catch()或try...catch块来处理网络请求失败或API返回错误的情况，并向用户提供反馈。
数据验证： 在处理API响应时，最好检查data是否为预期的数组类型，以增强代码的健壮性。
过滤空值： filter(Boolean)是一个简洁的方法，可以从数组中移除所有假值（如null, undefined, 0, ''）。这对于确保下拉菜单中不出现空白选项很有用。
key属性： 在v-for循环中，为<option>元素添加:key属性是一个好的实践，有助于Vue更有效地更新列表。这里可以直接使用选项值作为key，前提是选项值是唯一的。
默认选项： 为下拉菜单添加一个-- 请选择 --的默认选项，并将其value设置为null，可以提供更好的用户体验。

5. 总结

在Vue 3应用中，通过Fetch API获取数据并填充下拉菜单是一个常见任务。关键在于理解API返回的数据结构，并根据前端组件的渲染需求进行适当的数据转换。利用Array.prototype.map()进行字段提取和Set进行去重，是处理此类问题的有效方法。同时，良好的错误处理、数据验证和用户体验考量（如默认选项和加载状态）也是构建健壮应用不可或缺的部分。通过本文的实践指南，开发者可以更自信地处理类似的数据绑定场景。

以上就是Vue 3中Fetch API数据获取与下拉菜单动态填充的实践指南的详细内容，更多请关注php中文网其它相关文章！