Axios入门 - 技术栈

Axios 入门指南：Vue 3 中的 HTTP 客户端使用

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境，是前端开发中最常用的网络请求工具之一。本指南将以 Vue 3 项目为例，介绍 Axios 的基本使用方法（其他框架的使用方式类似）。

安装 Axios

首先使用包管理器安装 Axios：

bash 复制代码

# npm
npm install axios --save

# yarn
yarn add axios

# pnpm
pnpm add axios

基本使用方法

Axios 提供两种主要使用方式：

通过 axios(config) 发送配置化请求
使用简化方法如 axios.get()、axios.post() 等

所有方法都返回 Promise 对象，可通过 async/await 或 .then() 处理响应。

示例 1：发送 GET 请求

GET 请求通常用于从服务器获取数据。以下示例请求公开测试接口获取用户列表：

vue 复制代码

<template>
  <div>
    <h3>用户列表</h3>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else-if="loading">加载中...</p>
    <p v-else class="error">{{ errorMsg }}</p>
  </div>
</template>

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

const users = ref([]);
const loading = ref(false);
const errorMsg = ref('');

const fetchUsers = async () => {
  try {
    loading.value = true;
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    users.value = response.data;
    errorMsg.value = '';
  } catch (err) {
    errorMsg.value = '获取用户失败，请稍后重试';
    console.error('请求错误：', err);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchUsers);
</script>

<style>
.error { color: red; }
</style>

要点说明：

axios.get(url) 返回 Promise 对象
响应数据存储在 response.data 中
使用 try/catch 处理请求可能出现的错误

示例 2：发送 POST 请求

POST 请求通常用于向服务器提交数据：

vue 复制代码

<template>
  <div>
    <h3>创建帖子</h3>
    <button @click="createPost">提交</button>
    <p v-if="result">创建成功！返回的ID：{{ result.id }}</p>
    <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
  </div>
</template>

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

const result = ref(null);
const errorMsg = ref('');

const createPost = async () => {
  try {
    const postData = {
      title: '这是一篇测试帖子',
      body: 'Hello Axios!',
      userId: 1
    };
    const response = await axios.post(
      'https://jsonplaceholder.typicode.com/posts',
      postData
    );
    result.value = response.data;
    errorMsg.value = '';
  } catch (err) {
    errorMsg.value = '创建失败，请稍后重试';
    console.error('请求错误：', err);
  }
};
</script>

要点说明：

axios.post(url, data) 第二个参数是请求体数据
Axios 会自动将数据转为 JSON 格式
响应中包含服务器返回的资源信息

示例 3：通用请求配置

对于复杂场景，可以使用 axios(config) 进行完整配置：

javascript 复制代码

axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/users',
  params: { id: 1 },
  timeout: 5000,
  headers: { 'X-Requested-With': 'XMLHttpRequest' }
})
.then(response => {
  console.log('请求成功：', response.data);
})
.catch(err => {
  console.log('请求失败：', err);
});

常用配置项

Axios 支持多种请求配置：

method: 请求方法（默认 get）
url: 请求地址（必填）
params: GET 请求的查询参数
data: 请求体数据
timeout: 超时时间（毫秒）
headers: 自定义请求头
responseType: 期望的响应数据类型

错误处理进阶

错误对象 err 包含详细信息：

javascript 复制代码

try {
  // 请求代码
} catch (err) {
  if (err.response) {
    // 服务器返回错误
    console.log('状态码：', err.response.status);
    console.log('错误信息：', err.response.data);
  } else if (err.request) {
    // 请求已发送但无响应
    console.log('无响应：', err.request);
  } else {
    // 请求配置错误
    console.log('请求错误：', err.message);
  }
}

总结

Axios 使用步骤：

安装并导入 Axios
使用简化方法或完整配置发送请求
处理响应数据
捕获并处理错误

掌握这些基础知识后，可以进一步学习请求/响应拦截、全局配置等高级用法。