vue封装接口的方法

在Vue开发中，接口封装是一项至关重要的工作，它能够提高代码的可维护性与复用性。以下将详细介绍几种常见的Vue封装接口的方法。

基于axios的封装

axios是一个基于Promise的HTTP库，在Vue项目中广泛应用。安装axios后，在项目中创建一个专门的api文件夹，用于存放所有接口相关代码。

在api文件夹下创建一个index.js文件，引入axios实例并进行全局配置。例如：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础接口地址
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(config => {
  // 可以在此处添加token等请求头信息
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
  const res = response.data;
  if (res.code!== 200) {
    // 处理错误响应
    return Promise.reject(new Error(res.message || 'Error'));
  } else {
    return res;
  }
}, error => {
  return Promise.reject(error);
});

export default service;

接着，在api文件夹下创建各个模块的接口文件，比如user.js：

import service from './index';

// 获取用户信息接口
export function getUserInfo() {
  return service.get('/user/info');
}

使用mixin进行接口封装

Mixin是Vue的一项特性，可用于将多个组件的选项合并为一个新的选项对象。在api文件夹下创建一个apiMixin.js文件：

export const apiMixin = {
  methods: {
    async getUserInfo() {
      const response = await axios.get('/user/info');
      return response.data;
    }
  }
};

在组件中使用时，只需引入该mixin：

<template>
  <div>{{ userInfo }}</div>
</template>

<script>
import { apiMixin } from '@/api/apiMixin';

export default {
  mixins: [apiMixin],
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.getUserInfo().then(data => {
      this.userInfo = data;
    });
  }
};
</script>

Vuex结合接口封装

如果项目使用了Vuex，可将接口请求逻辑封装在actions中。在store文件夹下的actions.js中：

import { getUserInfo } from '@/api/user';

const actions = {
  async getUserInfo({ commit }) {
    const response = await getUserInfo();
    commit('SET_USER_INFO', response);
  }
};

export default actions;

组件中通过mapActions辅助函数调用：

<template>
  <div>{{ userInfo }}</div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    }
  },
  methods: {
  ...mapActions(['getUserInfo']),
    async getInfo() {
      await this.getUserInfo();
    }
  },
  mounted() {
    this.getInfo();
  }
};
</script>

通过上述方法，能根据项目实际需求灵活选择合适的接口封装方式，提升开发效率与代码质量。