Vue项目中如何从独立services文件夹调用axios并解决相关报错

云原生阿岚

2026-10-1

错误原因

你在services/gantt文件中定义的axios是一个返回动态import结果的函数，而非配置好的axios实例：
- 直接调用axios.get等价于在函数对象上调用不存在的get方法，自然抛出类型错误
- 即使你执行了axios()拿到的也只是Promise对象，需要await拿到导入结果里的default导出才是可用的axios实例

修复方案

方案1：改用静态导入（推荐，90%以上场景适用）

直接修改services/gantt.js的导入逻辑，代码如下：

// services/gantt.js 完整代码
import axios from "../plugins/axios";

exports.create = async (data) => {
  // 补充接收传入的data参数
  return axios
    .get("/", data)
    .then((res) => {
      console.log(res);
      return res; // 建议返回结果方便调用处使用
    })
    .catch((err) => {
      console.log(err);
      throw err; // 抛出错误方便调用处捕获处理
    })
    .finally(() => {});
};

方案2：如果确实需要使用动态导入的写法

修改services/gantt.js的逻辑，先等待导入完成再取axios实例：

// services/gantt.js 完整代码
const getAxios = () => import("../plugins/axios"); // 重命名避免和axios实例混淆

exports.create = async (data) => {
  // 等待导入完成，取default导出的配置好的axios实例
  const axios = (await getAxios()).default;
  return axios
    .get("/", data)
    .then((res) => {
      console.log(res);
      return res;
    })
    .catch((err) => {
      console.log(err);
      throw err;
    })
    .finally(() => {});
};

额外优化建议

调用异步的create方法时建议加await配合try catch处理，避免未捕获的Promise错误：

// 优化后的save方法
async save() {
  const CaseController = require("../services/gantt");
  try {
    const res = await CaseController.create(this.data);
    // 后续业务逻辑
  } catch (err) {
    // 错误提示等处理
  }
}