Vue 3 Ajax 请求（Axios）教程

1. 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于在 Vue 3 项目中发送 AJAX 请求。它支持：

  • GET/POST/PUT/DELETE 等 HTTP 方法
  • 请求和响应拦截器
  • 自动转换 JSON 数据
  • 取消请求
  • 超时处理
  • 并发请求

2. 安装 Axios

如果你使用的是 Vue 3 项目，需要先安装 Axios：

npm install axios

或者使用 yarn：

yarn add axios

如果使用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

3. 在 Vue 3 组件中使用 Axios

Vue 3 主要有两种方式处理 AJAX 请求：

  1. 在 setup() 里直接使用 Axios
  2. 封装 Axios 到 composables 可复用函数

4. 在 setup() 里直接使用

4.1 发送 GET 请求

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

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

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

    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    onMounted(fetchUsers);

    return { users };
  }
};
</script>

解析

  • users 是响应式数据，存储从 API 获取的用户列表。
  • fetchUsers 使用 axios.get() 发送请求，成功后将数据赋值给 users。
  • onMounted() 组件挂载时调用 fetchUsers()。

4.2 发送 POST 请求

<template>
  <div>
    <h2>创建用户</h2>
    <input v-model="newUser.name" placeholder="输入用户名">
    <button @click="createUser">提交</button>
  </div>
</template>

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

export default {
  setup() {
    const newUser = ref({ name: '' });

    const createUser = async () => {
      try {
        const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser.value);
        console.log('创建成功:', response.data);
      } catch (error) {
        console.error('创建失败:', error);
      }
    };

    return { newUser, createUser };
  }
};
</script>

解析

  • newUser 是用户输入的数据。
  • createUser 发送 POST 请求，将 newUser 传递到服务器。

4.3 发送 DELETE 请求

const deleteUser = async (id) => {
  try {
    await axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`);
    console.log('删除成功');
  } catch (error) {
    console.error('删除失败:', error);
  }
};

5. 封装 Axios 成 composables

为了让 AJAX 逻辑更加清晰，可以封装到可复用的 composables 函数中。

5.1 创建 useUsers.js

// src/composables/useUsers.js
import { ref, onMounted } from 'vue';
import axios from 'axios';

export function useUsers() {
  const users = ref([]);

  const fetchUsers = async () => {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      users.value = response.data;
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  onMounted(fetchUsers);

  return { users, fetchUsers };
}

5.2 在组件中使用

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { useUsers } from '../composables/useUsers.js';

export default {
  setup() {
    const { users } = useUsers();
    return { users };
  }
};
</script>

6. 配置全局 Axios

如果多个组件都会用到 Axios，可以配置全局 Axios 实例。

6.1 在 main.js 中配置

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// 配置全局 Axios 实例
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 5000; // 超时时间 5 秒

app.config.globalProperties.$axios = axios;

app.mount('#app');

6.2 在组件中使用全局 Axios

<script>
export default {
  setup(_, { proxy }) {
    const fetchData = async () => {
      const response = await proxy.$axios.get('/users');
      console.log(response.data);
    };

    return { fetchData };
  }
};
</script>

7. 使用 Axios 请求拦截器

拦截器可以在请求发送前或收到响应后进行处理。

7.1 添加请求拦截器

axios.interceptors.request.use(
  (config) => {
    console.log('请求发送:', config);
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

7.2 添加响应拦截器

axios.interceptors.response.use(
  (response) => {
    console.log('响应数据:', response);
    return response;
  },
  (error) => {
    console.error('响应错误:', error);
    return Promise.reject(error);
  }
);

8. 取消请求

如果用户切换页面时不希望请求继续，可以使用 AbortController 取消请求。

const controller = new AbortController();

axios.get('/users', { signal: controller.signal }).catch((error) => {
  if (error.name === 'AbortError') {
    console.log('请求已取消');
  }
});

// 取消请求
controller.abort();

9. 处理 Axios 错误

const fetchData = async () => {
  try {
    const response = await axios.get('/invalid-url');
    console.log(response.data);
  } catch (error) {
    if (error.response) {
      console.error('服务器错误:', error.response.status);
    } else if (error.request) {
      console.error('无响应:', error.request);
    } else {
      console.error('请求错误:', error.message);
    }
  }
};

10. 总结

功能示例
GET 请求axios.get(url)
POST 请求axios.post(url, data)
DELETE 请求axios.delete(url)
全局 Axiosaxios.defaults.baseURL = 'xxx'
拦截器axios.interceptors.request.use()
取消请求controller.abort()

Vue 3 推荐使用 Composition API 结合 Axios 来管理请求逻辑，这样可以提高可维护性和可复用性。