夜里12点解决组员惹出的Vue3线上大BUG

2022-11-18 16:36:07

Vue3 异步带来的线上陷阱

简介

在现代 Web 开发中，Vue3 因其高效性、响应性和强大的异步处理能力而备受推崇。然而，像任何强大的工具一样，异步特性也可能成为潜在的陷阱。本文将探讨一个真实的案例，阐述 Vue3 异步处理不当如何导致线上错误，并提供深入的解决方案和预防措施。

案例背景

我们的团队最近遇到一个棘手的线上问题，涉及到 Vue3 组件 Home.vue。该组件有一个简单的结构，包括一个标题和一个从服务器动态加载数据的列表。

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Home',
      items: []
    }
  },
  created() {
    this.fetchItems()
  },
  methods: {
    async fetchItems() {
      try {
        const response = await fetch('https://example.com/api/items')
        const data = await response.json()
        this.items = data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

问题根源

当组件加载时，它会调用 fetchItems 方法以从服务器获取数据。虽然该方法是一个异步操作，但它并没有对空响应进行任何处理。问题出在服务器偶尔会返回一个空数组。当这种情况发生时，items 属性会被更新为一个空数组，导致列表中的数据消失。

解决方案

为了解决这个问题，我们修改了 fetchItems 方法，在收到服务器响应后添加了一个检查：

async fetchItems() {
  try {
    const response = await fetch('https://example.com/api/items')
    const data = await response.json()
    if (data.length > 0) {
      this.items = data
    }
  } catch (error) {
    console.error(error)
  }
}