Vue中如何通过函数实现接口调用的具体操作步骤是怎样的？

前言这方面，为什么要在 Vue 项目中用函数封装接口调用？

在实际开发中，接口调用散落在各个组件里请求参数难以统一管理错误处理不一致导致代码难以维护、测试困难、复用率低。这些都是前端同学经常抱怨的痛点。

使用者痛点汇总

• ❌ 不知道该把请求代码放在哪儿，随手写在组件的 mounted 或 methods 里。
• ❌ 多个页面需要同一个接口，却要重复写相同的 axios 配置。
• ❌ 异步请求报错时页面卡死或报错信息不友好。
• ❌ 项目升级后旧的写法不兼容，需要大幅重构。
• ❌ 单元测试时难以 mock 接口返回值。

一、准备工作：安装并全局挂载 Axios

// terminal
npm install axios --save
// src/plugins/axios.js
import axios from 'axios';const instance = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL。