如何在Vue.js中实现Axios API请求的复用？

我来给你捋捋怎么实现这个需求，其实分几步就能轻松搞定API请求的复用，还能让所有组件直接调用这些函数：

第一步：先封装你的API请求模块 #

首先把所有的API请求逻辑抽出来，单独放到一个文件里（比如叫api.js），这样方便统一管理配置和请求函数：

// api.js
const axios = require('axios');

// 先给Axios做全局配置，比如接口域名、超时时间这些
axios.defaults.baseURL = 'https://你的接口域名.com';
axios.defaults.timeout = 5000;

// 可选：添加请求拦截器，比如自动带上登录token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('user_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 封装具体的API请求函数，按业务分类就行
export const api = {
  // 示例：获取用户信息
  getUserInfo(userId) {
    return axios.get(`/users/${userId}`);
  },
  // 示例：提交表单
  submitForm(formData) {
    return axios.post('/form/submit', formData);
  },
  // 你可以根据自己的业务需求，添加更多请求函数
};

第二步：把API挂载到Vue全局 #

回到你的主入口文件（比如app.js），把刚才封装好的API模块挂载到Vue的原型上，这样所有Vue实例和组件都能直接调用：

// app.js
window.axios = require('axios');
window.Vue = require('vue');

// 引入我们封装的API模块，注意路径要和你的文件结构匹配
const { api } = require('./api.js');

// 关键一步：把API挂载到Vue原型，这样组件里就能用this.$api访问
Vue.prototype.$api = api;

const app = new Vue({
  el: '#app',
  mounted(){
    console.log('hello!');
    // 这里也能直接调用API啦
    this.$api.getUserInfo(123)
      .then(res => console.log('用户信息:', res.data))
      .catch(err => console.error('请求失败:', err));
  }
});

第三步：在组件里直接调用API #

现在不管是哪个Vue组件，都可以用this.$api直接调用封装好的请求函数，再也不用重复写axios配置啦：

<template>
  <div>
    <button @click="fetchUserData">获取用户数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async fetchUserData() {
      try {
        const res = await this.$api.getUserInfo(456);
        console.log('组件拿到的用户数据:', res.data);
        // 这里处理你的业务逻辑就行
      } catch (err) {
        console.error('请求出错啦:', err);
      }
    }
  }
}
</script>

进阶：用Vue插件方式封装（适合大型项目） #

如果你的项目比较大，用Vue插件的方式会更规范：

// api-plugin.js
const axios = require('axios');

// Axios全局配置
axios.defaults.baseURL = 'https://你的接口域名.com';

// API请求函数
const api = {
  getUserInfo(userId) {
    return axios.get(`/users/${userId}`);
  },
  // 更多请求函数...
};

// 定义Vue插件
const ApiPlugin = {
  install(Vue) {
    Vue.prototype.$api = api;
  }
};

module.exports = ApiPlugin;

然后在主入口文件里使用插件：

// app.js
window.Vue = require('vue');
const ApiPlugin = require('./api-plugin.js');

// 注册插件
Vue.use(ApiPlugin);

const app = new Vue({
  el: '#app',
  mounted(){
    this.$api.getUserInfo(789).then(res => console.log(res.data));
  }
});

这样做的好处简直不要太多：

• 所有请求逻辑集中管理，后期改接口地址或者加拦截器，只需要改一个地方
• 组件里调用API超级简洁，不用每次都引入axios或者重复写请求路径
• 统一的错误处理逻辑也能放到api模块里，减少重复代码

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