Vue3 学习教程，从入门到精通，Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23）

Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码

在 Vue3 中，Axios 是一个非常流行的用于处理 HTTP 请求的库。以下将详细介绍如何在 Vue3 项目中使用 Axios 进行 Ajax 请求，包括所有相关的语法知识点，并提供一个详细的案例代码，包含详细注释。

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它具有以下特点：

• 支持 Promise API
• 支持请求和响应的拦截器
• 支持请求和响应的数据转换
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防止 XSRF

二、在 Vue3 项目中安装 Axios

1. 使用 npm 安装

npm install axios

2. 使用 yarn 安装

yarn add axios

三、Axios 语法知识点

1. 基本请求方法

Axios 提供了多种请求方法，常用的包括：

• axios.get(url[, config])
• axios.post(url, data[, config])
• axios.put(url, data[, config])
• axios.delete(url[, config])
• axios.patch(url, data[, config])

2. 配置对象 (config)

配置对象用于设置请求的各种参数，例如：

• baseURL: 基础 URL
• headers: 设置请求头
• params: URL 参数
• timeout: 请求超时时间
• responseType: 响应数据类型

3. 响应结构

Axios 的响应包含以下信息：

• data: 实际响应数据
• status: HTTP 状态码
• statusText: HTTP 状态信息
• headers: 响应头
• config: 请求配置
• request: 原生请求对象

4. 拦截器 (Interceptors)

拦截器用于在请求或响应被 then 或 catch 处理之前拦截它们。

• 请求拦截器: axios.interceptors.request.use()
• 响应拦截器: axios.interceptors.response.use()

5. 取消请求 (Cancel Token)

可以通过 CancelToken 来取消请求。

6. 错误处理

使用 try...catch 或 .catch() 来捕获请求错误。

四、Vue3 中使用 Axios 的案例代码

以下是一个完整的 Vue3 项目示例，展示如何使用 Axios 进行数据获取和处理。假设我们有一个简单的用户列表应用，从远程 API 获取用户数据并显示。

1. 项目结构

src/
├── components/
│   └── UserList.vue
├── App.vue
├── main.js

2. 安装 Axios

确保已经安装了 Axios：

npm install axios

3. 配置 Axios 实例 (可选)

为了更好地管理 Axios 配置，可以在 src 目录下创建一个 axios.js 文件：

// src/axios.js
import axios from 'axios';

// 创建 Axios 实例
const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 示例 API
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
api.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，例如添加认证 token
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default api;

4. 创建用户列表组件 (UserList.vue)

<!-- src/components/UserList.vue -->
<template>
  <div>
    <h1>用户列表</h1>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>用户名</th>
            <th>邮箱</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
          </tr>
        </tbody>
      </table>
      <div v-if="error" class="error">
        {{ error }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from '../axios'; // 引入自定义的 Axios 实例

export default {
  name: 'UserList',
  setup() {
    const users = ref([]); // 存储用户数据
    const loading = ref(false); // 加载状态
    const error = ref(null); // 错误信息

    // 获取用户数据的方法
    const fetchUsers = async () => {
      loading.value = true;
      error.value = null;
      try {
        const response = await axios.get('/users'); // GET 请求获取用户数据
        users.value = response.data; // 存储响应数据
      } catch (err) {
        error.value = '获取用户数据失败';
        console.error(err);
      } finally {
        loading.value = false;
      }
    };

    // 在组件挂载时调用 fetchUsers
    onMounted(() => {
      fetchUsers();
    });

    return {
      users,
      loading,
      error,
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}

.error {
  color: red;
  font-weight: bold;
}
</style>

5. 配置主应用 (App.vue)

<!-- src/App.vue -->
<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  name: 'App',
  components: {
    UserList,
  },
};
</script>

<style>
/* 全局样式 */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}
</style>

6. 主入口文件 (main.js)

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from './axios'; // 引入自定义的 Axios 实例

const app = createApp(App);

// 将 Axios 实例挂载到全局属性（可选）
app.config.globalProperties.$axios = axios;

app.mount('#app');

7. 运行项目

确保项目已经正确配置并运行：

npm run serve

打开浏览器访问 http://localhost:8080，即可看到用户列表。

五、详细解释

1. Axios 实例配置

在 src/axios.js 中，我们创建了一个 Axios 实例 api，并设置了基础 URL、超时时间和默认请求头。这样做的好处是：

• 统一管理基础配置
• 方便后续扩展，例如添加认证 token
• 提高代码的可维护性

2. 请求拦截器

请求拦截器允许我们在请求发送前对请求进行修改，例如添加认证信息：

api.interceptors.request.use(
  (config) => {
    // 例如添加认证 token
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

3. 响应拦截器

响应拦截器允许我们在接收到响应后对数据进行预处理，例如统一处理错误：

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    // 例如统一处理 401 未授权错误
    if (error.response && error.response.status === 401) {
      // 处理未授权逻辑
    }
    return Promise.reject(error);
  }
);

4. 组件中的 Axios 使用

在 UserList.vue 中，我们使用 axios.get 方法发送 GET 请求获取用户数据：

const fetchUsers = async () => {
  loading.value = true;
  error.value = null;
  try {
    const response = await axios.get('/users');
    users.value = response.data;
  } catch (err) {
    error.value = '获取用户数据失败';
    console.error(err);
  } finally {
    loading.value = false;
  }
};

5. 错误处理

在 fetchUsers 方法中，我们使用 try...catch 来捕获请求错误，并在界面上显示错误信息：

if (error) {
  // 显示错误信息
}

6. 加载状态

使用 loading 状态来控制加载中的显示：

<div v-if="loading">加载中...</div>

7. 展示数据

使用 v-for 指令遍历 users 数据并展示：

<tr v-for="user in users" :key="user.id">
  <td>{{ user.id }}</td>
  <td>{{ user.name }}</td>
  <td>{{ user.username }}</td>
  <td>{{ user.email }}</td>
</tr>

8. 样式

简单的样式用于美化表格和错误信息：

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

六、扩展功能

1. 使用 POST 请求创建用户

const createUser = async (newUser) => {
  try {
    const response = await axios.post('/users', newUser);
    users.value.push(response.data);
  } catch (err) {
    console.error(err);
  }
};

2. 使用 PUT 请求更新用户

const updateUser = async (id, updatedUser) => {
  try {
    const response = await axios.put(`/users/${id}`, updatedUser);
    const index = users.value.findIndex(user => user.id === id);
    if (index !== -1) {
      users.value[index] = response.data;
    }
  } catch (err) {
    console.error(err);
  }
};

3. 使用 DELETE 请求删除用户

const deleteUser = async (id) => {
  try {
    await axios.delete(`/users/${id}`);
    users.value = users.value.filter(user => user.id !== id);
  } catch (err) {
    console.error(err);
  }
};

4. 使用取消令牌 (Cancel Token)

const source = axios.CancelToken.source();

const fetchUsers = async () => {
  try {
    const response = await axios.get('/users', {
      cancelToken: source.token,
    });
    users.value = response.data;
  } catch (err) {
    if (axios.isCancel(err)) {
      console.log('请求取消', err.message);
    } else {
      console.error(err);
    }
  }
};

// 取消请求
source.cancel('用户取消请求');

5. 使用 Vue 3 的 Composition API 优化

在 Vue 3 中，可以使用 useAxios 这样的自定义钩子来复用 Axios 请求逻辑。例如：

// src/composables/useAxios.js
import { ref } from 'vue';
import axios from '../axios';

const useAxios = (url) => {
  const data = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchData = async () => {
    loading.value = true;
    error.value = null;
    try {
      const response = await axios.get(url);
      data.value = response.data;
    } catch (err) {
      error.value = '获取数据失败';
      console.error(err);
    } finally {
      loading.value = false;
    }
  };

  return {
    data,
    loading,
    error,
    fetchData,
  };
};

export default useAxios;

然后在组件中使用：

<script>
import useAxios from '../composables/useAxios';

export default {
  setup() {
    const { data: users, loading, error, fetchData } = useAxios('/users');

    onMounted(() => {
      fetchData();
    });

    return {
      users,
      loading,
      error,
    };
  },
};
</script>

七、总结

通过以上内容，我们详细介绍了在 Vue3 项目中使用 Axios 进行 Ajax 请求的各个方面，包括安装、配置、请求方法、拦截器、错误处理等。同时，通过一个完整的案例代码展示了如何在实际项目中应用这些知识。根据具体需求，开发者可以进一步扩展和优化 Axios 的使用，例如添加认证、文件上传、并发请求等。