异常教程

Vue3 Ajax(axios)（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，Vue3 和 Axios 的组合已成为前端开发者构建动态交互应用的核心工具之一。Vue3 通过其 Composition API 和响应式系统提供了高效灵活的组件化开发体验，而 Axios 则凭借其简洁的 API 设计和强大的功能，成为处理 HTTP 请求的首选库。本文将从基础概念到实战案例，系统性地讲解如何在 Vue3 项目中使用 Axios 实现 Ajax 请求，帮助开发者快速掌握这一技能，同时通过形象比喻和代码示例降低学习门槛。

一、Vue3 与 Axios 的基础概念

1.1 什么是 Ajax？

Ajax（Asynchronous JavaScript and XML）是一种通过 JavaScript 在后台与服务器交换数据的技术，允许网页在不重新加载的情况下更新部分内容。可以将其想象为“快递服务”：当用户在网页上提交表单时，数据像包裹一样被发送到服务器（GET 或 POST 请求），服务器处理后返回结果（响应数据），而用户无需等待整个页面刷新即可看到结果。

1.2 为什么选择 Axios？

Axios 是基于 Promise 的 HTTP 客户端，具有以下优势：

  • 支持浏览器端和 Node.js 环境
  • 自动转换 JSON 数据
  • 支持请求/响应拦截
  • 可取消请求
  • 客户端支持防御 XSRF（跨站请求伪造）

与原生 XMLHttpRequest 相比，Axios 的链式调用和 Promise 语法让代码更简洁易读。

1.3 Vue3 的响应式系统与 Ajax 的结合

Vue3 的响应式系统通过 ref 和 reactive 等 API 实现数据驱动视图更新。当 Ajax 请求成功获取数据后，直接更新响应式变量即可触发视图渲染，这一特性使得 Vue3 与 Ajax 的协作变得自然流畅。

二、环境搭建与基本配置

2.1 创建 Vue3 项目

使用 Vue CLI 快速初始化项目：

npm init vue@latest  
cd your-project-name  
npm install

2.2 安装 Axios

通过 npm 或 yarn 安装：

npm install axios  
yarn add axios

2.3 全局引入与配置（可选）

在 main.js 中全局引入 Axios 并设置默认配置：

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

const app = createApp(App);  

// 全局配置  
axios.defaults.baseURL = 'https://api.example.com';  
axios.defaults.timeout = 5000;  

// 拦截器（添加请求头或统一错误处理）  
axios.interceptors.request.use(  
  (config) => {  
    config.headers['Authorization'] = 'Bearer ' + getToken();  
    return config;  
  },  
  (error) => {  
    return Promise.reject(error);  
  }  
);  

app.config.globalProperties.$axios = axios;  
app.mount('#app');

三、Axios 在 Vue3 中的基本用法

3.1 GET 请求：获取公开数据

在 Vue3 组件中使用 Composition API 发送 GET 请求：

<template>  
  <div v-if="loading">正在加载...</div>  
  <div v-else>  
    <ul>  
      <li v-for="item in data" :key="item.id">{{ item.title }}</li>  
    </ul>  
  </div>  
</template>  

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

const data = ref([]);  
const loading = ref(true);  

axios.get('/api/items')  
  .then(response => {  
    data.value = response.data;  
    loading.value = false;  
  })  
  .catch(error => {  
    console.error('请求失败:', error);  
    loading.value = false;  
  });  
</script>

3.2 POST 请求：提交表单数据

<template>  
  <form @submit.prevent="handleSubmit">  
    <input v-model="formData.name" placeholder="姓名" />  
    <button type="submit">提交</button>  
  </form>  
</template>  

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

const formData = ref({ name: '' });  

const handleSubmit = () => {  
  axios.post('/api/submit', formData.value)  
    .then(response => {  
      alert('提交成功！');  
      formData.value.name = '';  
    })  
    .catch(error => {  
      console.error('提交失败:', error);  
    });  
};  
</script>

四、进阶技巧与问题处理

4.1 使用 async/await 简化代码

通过 async 和 await 可以让异步代码更接近同步逻辑，避免嵌套的 .then()：

const fetchData = async () => {  
  try {  
    const response = await axios.get('/api/data');  
    data.value = response.data;  
  } catch (error) {  
    console.error('获取数据失败:', error);  
  } finally {  
    loading.value = false;  
  }  
};

4.2 请求参数与查询字符串

Axios 自动将对象参数转换为查询字符串：

// GET 请求附加参数  
axios.get('/api/search', {  
  params: {  
    keyword: 'vue3',  
    page: 1  
  }  
});  
// URL 自动变为：/api/search?keyword=vue3&page=1

4.3 错误处理与状态码判断

HTTP 状态码 2xx 表示成功，4xx/5xx 表示客户端或服务器错误：

axios.get('/api/error')  
  .then(response => {  
    if (response.status === 200) {  
      // 正常处理  
    }  
  })  
  .catch(error => {  
    if (error.response) {  
      // 服务器响应错误（4xx/5xx）  
      console.log('状态码:', error.response.status);  
    } else {  
      // 网络错误或超时  
    }  
  });

五、实战案例：构建一个简单的天气查询应用

5.1 需求分析

用户输入城市名称，点击按钮后显示该城市的天气信息，包括温度、天气状况等。

5.2 接口设计

假设使用第三方天气 API（如 OpenWeatherMap）：

GET https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}

5.3 实现步骤

5.3.1 安装依赖

已安装 Vue3 和 Axios。

5.3.2 创建组件

在 src/components/Weather.vue 中编写代码：

<template>  
  <div class="weather-container">  
    <input v-model="city" placeholder="输入城市名称" />  
    <button @click="getWeather">查询</button>  
    <div v-if="weatherData.weather">  
      <h3>{{ city }} 的天气：</h3>  
      <p>温度：{{ Math.round(weatherData.main.temp - 273.15) }}℃</p>  
      <p>天气状况：{{ weatherData.weather[0].description }}</p>  
    </div>  
    <div v-if="error">{{ error }}</div>  
  </div>  
</template>  

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

const city = ref('');  
const weatherData = ref({});  
const error = ref('');  

const getWeather = async () => {  
  if (!city.value) {  
    error.value = '请输入城市名称';  
    return;  
  }  

  try {  
    const response = await axios.get(  
      `https://api.openweathermap.org/data/2.5/weather`,  
      {  
        params: {  
          q: city.value,  
          appid: 'YOUR_API_KEY',  // 替换为你的 API 密钥  
          units: 'metric'  
        }  
      }  
    );  
    weatherData.value = response.data;  
    error.value = '';  
  } catch (err) {  
    if (err.response?.status === 404) {  
      error.value = '城市名称无效，请重新输入';  
    } else {  
      error.value = '请求失败，请检查网络';  
    }  
  }  
};  
</script>  

<style scoped>  
.weather-container {  
  padding: 20px;  
  border: 1px solid #ccc;  
  border-radius: 8px;  
}  
</style>

5.3.3 在 App.vue 中引入组件

<template>  
  <div id="app">  
    <Weather />  
  </div>  
</template>  

<script setup>  
import Weather from './components/Weather.vue';  
</script>

六、性能优化与最佳实践

6.1 防止重复请求：使用防抖（Debounce）

在搜索框输入时频繁触发请求会导致性能问题，可通过防抖延迟请求：

import { debounce } from 'lodash';  // 或自行实现防抖函数  

const handleSearch = debounce(() => {  
  axios.get('/api/search', { params: { query: searchQuery.value } });  
}, 300);

6.2 缓存常用数据

对于不频繁变化的数据（如城市列表），可缓存响应结果：

const cachedData = ref({});  

const fetchData = async (url) => {  
  if (cachedData.value[url]) {  
    return cachedData.value[url];  
  }  

  const response = await axios.get(url);  
  cachedData.value[url] = response.data;  
  return response.data;  
};

6.3 并发请求控制

使用 Promise.all() 同时发送多个请求：

const [user, orders] = await Promise.all([  
  axios.get('/api/user'),  
  axios.get('/api/orders')  
]);

七、常见问题与解决方案

7.1 跨域问题（CORS）

当前端与后端不在同一域名时，浏览器会阻止请求。解决方案包括：

  • 后端配置 CORS 头（推荐）
  • 使用代理服务器
  • 开发环境配置 Vue CLI 代理： 
    // vue.config.js  
module.exports = {  
  devServer: {  
    proxy: {  
      '/api': {  
        target: 'http://localhost:3000',  
        changeOrigin: true,  
      },  
    },  
  },  
};

7.2 请求超时

通过 timeout 参数设置超时时间：

axios.get('/api/slow', { timeout: 3000 });

八、结论

通过本文的讲解，读者应已掌握在 Vue3 项目中使用 Axios 完成 Ajax 请求的核心方法，并能解决常见问题。Vue3 的响应式系统与 Axios 的结合，使得数据驱动视图更新的流程变得直观高效。无论是基础的 GET/POST 请求，还是进阶的错误处理、性能优化，均可以通过本文提供的代码示例和逻辑框架快速实现。

随着实践的深入，建议开发者进一步探索以下方向：

  1. 使用 TypeScript 增强代码类型安全
  2. 结合 Vue3 的 Suspense 组件处理异步加载状态
  3. 研究 Axios 的拦截器实现全局错误处理和日志记录

掌握 Vue3 Ajax(axios) 的核心技能后，开发者可以更专注于业务逻辑的实现，为用户提供流畅的交互体验。

最新发布

查看更多文章