Vue 与 AJAX

现代 Web 应用很少是纯静态的，它们通常需要与服务器进行动态的数据交换。例如，获取文章列表、提交用户信息、搜索数据等。这个过程通常通过 AJAX (Asynchronous JavaScript and XML) 技术来实现。

AJAX 允许网页在不重新加载整个页面的情况下，与服务器交换数据，并更新部分网页内容。

如何在 Vue 中使用 AJAX？

首先要明确一点：Vue 本身不包含任何 AJAX 功能。Vue 的核心库专注于视图层，它并不关心你如何获取数据。你可以使用任何你喜欢的方式来发起 HTTP 请求。

常见的 AJAX 技术和库包括：

浏览器原生的 fetch API：这是现代浏览器内置的、用于发起网络请求的标准 API。它基于 Promise，语法简洁。
第三方库，如 axios：这是一个非常流行和强大的 HTTP 客户端库。它提供了更多功能，如请求和响应拦截、取消请求、自动转换 JSON 数据等，并且在浏览器和 Node.js 环境中都能使用。

使用 `fetch` API

fetch 是最直接的方式，因为它不需要安装任何额外的依赖。

下面是一个在 Vue 组件的 onMounted 生命周期钩子中使用 fetch 获取数据的例子：

vue

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

const posts = ref([])
const loading = ref(true)
const error = ref(null)

async function fetchData() {
  loading.value = true
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    posts.value = await response.json()
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div>
    <h1>Posts</h1>
    <div v-if="loading">Loading...</div>
    <div v-if="error" style="color: red;">{{ error }}</div>
    <ul v-if="posts.length">
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

在这个例子中：

我们定义了 posts、loading 和 error 三个响应式状态来管理数据、加载状态和错误信息。
fetchData 函数使用 async/await 语法来处理异步的 fetch 请求。
我们使用 try...catch...finally 块来处理可能发生的网络错误和更新加载状态。
在 onMounted 钩子中调用 fetchData，这样组件一挂载就会开始获取数据。

为什么通常推荐使用库？

虽然 fetch 很方便，但对于复杂的应用，使用像 axios 这样的库有几个好处：

更丰富的功能：提供了拦截器、取消请求、超时设置等高级功能。
更好的错误处理：axios 会将非 2xx 的 HTTP 状态码视为错误并拒绝 Promise，而 fetch 只有在网络失败时才会拒绝，对于 404 或 500 等错误，它仍然会 resolve。
自动数据转换：axios 自动将请求和响应数据转换为 JSON，而 fetch 需要手动调用 .json()。
浏览器兼容性：axios 在旧版浏览器中有更好的兼容性。

在下一章节，我们将详细介绍如何在 Vue 中集成和使用 axios。

Vue 与 AJAX ​

如何在 Vue 中使用 AJAX？ ​

使用 fetch API ​

为什么通常推荐使用库？ ​

Vue 与 AJAX

如何在 Vue 中使用 AJAX？

使用 `fetch` API

为什么通常推荐使用库？