如何使用Vue3.js创建通用API请求服务？

原代码核心问题 #

• 页面组件未定义query变量，也未导入URL常量和请求方法
• 服务文件未正确导出get方法，存在this指向错误、未引入base_url的问题
• 请求调用时参数传递、解构方式错误

修复后的完整代码 #

1. 全局URL配置文件（建议命名为constants.js） #

export const ConstantBaseUrl = {
  base_url: "https://localhost:7005/",
};

export const EndPointUrl = {
  weather_url: "api/weather/"
};

2. 通用HTTP服务文件（命名为HttpService.js，不要用.vue后缀） #

import axios from "axios";
import { ConstantBaseUrl } from "../constants"; // 根据实际文件路径调整

export const httpService = {
  async get(url, params = {}) {
    try {
      // 用axios的params自动拼接URL查询参数，更规范
      const response = await axios.get(`${ConstantBaseUrl.base_url}${url}`, { params });
      return response;
    } catch (err) {
      // 统一错误处理，返回约定格式的错误信息
      return {
        isSuccessful: false,
        response: err.response?.data?.message || "请求失败"
      };
    }
  }
};

3. 页面组件代码 #

<script>
import { httpService } from "./services/HttpService"; // 导入通用服务
import { EndPointUrl } from "./constants"; // 导入接口路径常量

export default {
  data() {
    return {
      weather: undefined,
      error: false,
      errormessage: "",
      query: "" // 新增输入框绑定的query变量
    };
  },
  methods: {
    async fetchWeather(e) {
      if (e.key === "Enter") {
        if (!this.query) {
          this.error = true;
          this.errormessage = '请输入要搜索的城市名称！';
          return;
        }

        // 调用通用get方法，传递接口路径和查询参数
        const response = await httpService.get(`${EndPointUrl.weather_url}forecast`, { city: this.query });
        this.setResults(response.data);
      }
    },
    setResults(res) {
      if (res.isSuccessful === true) {
        this.error = false;
        this.weather = res.response;
      } else {
        this.weather = undefined;
        this.errormessage = res.response;
        this.error = true;
      }
    }
  }
};
</script>

关键修复说明 #

• 服务文件改用.js后缀，导出包含get方法的对象，避免Vue组件的冗余结构
• 使用axios的params参数自动拼接URL查询参数，减少手动拼接的错误
• 页面组件补充query变量，导入所需的服务和URL常量
• 统一错误处理逻辑，避免未捕获异常导致页面卡死
• 修正this指向问题，服务中不再依赖this，改用传入的参数

内容的提问来源于stack exchange，提问作者Kamran Khan