Vue异步处理、异步请求

Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，它允许开发者以声明式的方式编写异步操作。在 Vue 中处理异步任务非常重要，因为很多现代Web应用都需要与后端API交互、执行耗时计算或管理复杂的异步流程。以下是对 Vue 中异步处理的详细讲解：

1. 使用 async/await

从 Vue 2.6 开始，官方支持了对 async 和 await 的使用。这使得异步代码更加简洁易读。你可以在组件的方法、生命周期钩子函数或者组合式 API（Composition API）中使用它们。

// 在方法中使用 async/await
methods: {
  async fetchData() {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      this.items = data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

2. 组合式 API (Composition API)

Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织和重用逻辑。你可以利用 setup() 函数中的响应式状态和副作用来处理异步任务。

import { ref, onMounted } from 'vue';

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

    const loadItems = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        items.value = data;
      } catch (error) {
        console.error('Error loading items:', error);
      }
    };

    onMounted(loadItems);

    return {
      items,
    };
  },
};

3. Vuex Store

如果你的应用程序有多个组件需要共享状态，并且这些状态依赖于异步操作的结果，那么 Vuex 是一个很好的选择。Vuex 提供了 actions 来处理异步逻辑。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    items: [],
  },
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items;
    },
  },
  actions: {
    async fetchItems({ commit }) {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        commit('SET_ITEMS', data);
      } catch (error) {
        console.error('Error fetching items:', error);
      }
    },
  },
});

然后在组件中调用这个 action：

import { useStore } from 'vuex';
import { onMounted } from 'vue';

export default {
  setup() {
    const store = useStore();

    onMounted(() => {
      store.dispatch('fetchItems');
    });

    return {
      items: computed(() => store.state.items),
    };
  },
};

4. Axios 或 Fetch API

对于HTTP请求，你可以选择使用内置的 Fetch API 或者流行的第三方库如 Axios。Axios 提供了更多特性，例如请求取消、自动转换JSON等。

// 使用 axios 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    // 成功时更新组件的状态
    this.items = response.data;
  })
  .catch(error => {
    // 错误处理
    console.error('Error fetching data:', error);
  });

5. Promise

Promise 是 JavaScript 原生支持的一种异步编程模式。虽然 async/await 更加直观，但在某些情况下直接使用 Promise 也是必要的。

// 创建一个新的 Promise 并立即解析
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello World');
  }, 1000);
}).then(message => {
  console.log(message); // 输出 "Hello World" 一秒钟后
});

6. 处理加载状态和错误信息

在进行异步操作时，通常还需要考虑显示加载指示器以及如何向用户展示可能发生的错误。可以通过定义额外的状态变量来实现这一点。

const loading = ref(true);
const error = ref(null);

async function loadData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    items.value = data;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
}

在模板中可以基于这些状态变量来决定渲染的内容：

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error }}</div>
  <ul v-else>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>