Vue.js项目多文件/函数中捕获Axios请求方案咨询

我来帮你把这套Vue.js项目里的HTTP请求相关代码整理成清晰易读的Markdown格式，方便你后续维护和参考：

这个文件的核心是创建一个带JWT授权头的Axios实例，让所有接口请求都能自动带上用户token，不用在每个接口里重复写授权逻辑：

// Api.js - 创建带JWT授权的基础Axios实例
import axios from 'axios';
import store from '@/store'; // 请根据你的项目实际路径引入Vuex Store

export default () => {
  return axios.create({
    baseURL: apiURL, // 这里替换成你的后端接口基础地址
    headers: {
      Authorization: `JWT ${store.state.token}`
    }
  })
}

这里把具体的业务接口封装成独立函数，组件调用时只需要调用对应函数即可，不用关心底层的请求细节：

// service.js - 封装各业务接口请求函数
import Api from './Api'; // 引入上面的基础Axios实例

export default {
  // 获取系统状态接口
  status() {
    return Api().get('status/')
  },

  // 你可以在这里扩展更多接口，比如：
  // getUserProfile() {
  //   return Api().get('user/profile/')
  // },
  // updateUserInfo(data) {
  //   return Api().post('user/update/', data)
  // }
}

在组件的created钩子中调用封装好的接口，处理成功响应和错误情况：

<!-- 示例Vue组件 -->
<template>
  <div class="example-component">
    <!-- 这里放你的组件UI内容 -->
  </div>
</template>

<script>
import Service from './service'; // 引入封装的接口服务

export default {
  name: 'ExampleComponent',
  data() {
    return {
      systemStatus: null // 用来存储接口返回的状态数据
    }
  },
  created() {
    // 组件创建完成后立即请求状态接口
    Service.status()
      .then(response => {
        // 处理接口返回的成功数据
        this.systemStatus = response.data;
        console.log('系统状态获取成功:', response.data);
      })
      .catch(error => {
        // 处理请求失败的情况
        console.error('系统状态请求失败:', error);
        // 这里可以添加用户友好的错误提示，比如弹出Toast
      })
  }
}
</script>

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