Vue 中如何处理异步请求？常用的方法有哪些？

在 Vue 中处理异步请求是常见的需求，尤其是在与后端 API 交互时。Vue 本身不提供异步请求的方法，但可以通过以下几种常用的方法来实现：

1. 使用 JavaScript 原生 fetch API

fetch 是原生 JavaScript 提供的一个用于发起网络请求的 API，它可以返回一个 Promise 对象。

示例代码：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([]);
const loading = ref(false);
const error = ref(null);

async function fetchData() {
  loading.value = true;
  error.value = null;
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const jsonData = await response.json();
    data.value = jsonData;
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
}
</script>

2. 使用 axios 库

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。

示例代码：

首先，安装 axios：

npm install axios

然后，在 Vue 组件中使用：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

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

const data = ref([]);
const loading = ref(false);
const error = ref(null);

async function fetchData() {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.get('https://api.example.com/data');
    data.value = response.data;
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
}
</script>

3. 使用 async/await 与 XMLHttpRequest

虽然 XMLHttpRequest 已经不太现代，但仍然可以在一些旧的浏览器中使用。

示例代码：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([]);
const loading = ref(false);
const error = ref(null);

async function fetchData() {
  loading.value = true;
  error.value = null;
  try {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          data.value = response;
        } else {
          throw new Error('Network response was not ok');
        }
      }
    };
    await new Promise((resolve, reject) => {
      xhr.onload = resolve;
      xhr.onerror = reject;
      xhr.send();
    });
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
}
</script>

4. 使用 Vue 插件

一些 Vue 插件，如 vue-resource 和 vue-axios，提供了封装好的请求方法，可以简化异步请求的处理。

示例代码：

使用 vue-axios 插件：

<template>
  <div>
    <button @click="fetchData">Load Data</button>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="item in data" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

const data = ref([]);
const loading = ref(false);
const error = ref(null);

async function fetchData() {
  loading.value = true;
  error.value = null;
  try {
    await this.$axios.get('https://api.example.com/data').then((response) => {
      data.value = response.data;
    });
  } catch (err) {
    error.value = err;
  } finally {
    loading.value = false;
  }
}
</script>

总结

处理异步请求是前端开发中的常见任务，Vue 提供了灵活的方式来集成各种 HTTP 客户端库。fetch API、axios、XMLHttpRequest 和 Vue 插件都是处理异步请求的常用方法。选择哪种方法取决于项目需求、团队习惯以及对浏览器兼容性的考虑。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情