Vue 与 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可以用在浏览器和 Node.js 中。它是目前前端开发中最流行的 AJAX 库之一，因其强大的功能和易用性而备受青睐。

为什么选择 Axios？

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装 Axios

首先，你需要将 Axios 添加到你的项目中：

bash

npm install axios

在 Vue 中使用 Axios

你可以在任何需要发起 HTTP 请求的组件中直接导入和使用 Axios。

GET 请求示例

让我们用 Axios 重写上一章获取文章列表的例子：

vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios' // 导入 axios

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

async function fetchData() {
  loading.value = true
  try {
    // 使用 axios.get 发起请求
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
    // Axios 将响应数据放在 response.data 中
    posts.value = response.data
  } catch (err) {
    // Axios 会自动处理非 2xx 的状态码，并抛出错误
    error.value = err.message
  } finally {
    loading.value = false
  }
}

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

<template>
  <!-- 模板部分与 fetch 示例相同 -->
  <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>

可以看到，代码与 fetch 版本非常相似，但更简洁一些：

不需要检查 response.ok，因为 Axios 会自动将失败的 HTTP 状态视为错误。
不需要手动调用 .json()，因为 Axios 会自动解析 JSON 响应。

POST 请求示例

发送数据到服务器通常使用 POST 请求。

async function createPost() {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    });
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
}

创建 Axios 实例

在大型应用中，你可能会向同一个 API 发出许多请求。为避免在每个请求中重复配置（如基础 URL、超时时间、请求头等），可以创建一个 Axios 实例。

通常，我们会在项目中创建一个专门的文件来处理 API 相关的配置，例如 src/api.js 或 src/utils/axios.js。

src/api.js

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    // 你可以在这里添加认证 token 等
    // 'Authorization': 'Bearer YOUR_TOKEN'
  }
});

export default apiClient;

现在，在你的组件中，你可以导入并使用这个预先配置好的实例：

MyComponent.vue

vue

<script setup>
import apiClient from '../api.js'

async function fetchUsers() {
  // 请求将会发往 https://api.example.com/users
  const response = await apiClient.get('/users')
  // ...
}
</script>

这种方式极大地提高了代码的可维护性和复用性。

Vue 与 Axios ​

为什么选择 Axios？ ​

安装 Axios ​

在 Vue 中使用 Axios ​

GET 请求示例 ​

POST 请求示例 ​