vue接口如何封装

封装Vue接口的方法可以分为几个步骤。1、创建独立的API文件，2、配置axios实例，3、创建接口请求函数，4、在组件中调用API接口。通过这些步骤，可以使API管理更加规范化和模块化，有助于提高代码的可维护性和复用性。

一、创建独立的API文件

首先，为了使代码更加清晰和易于维护，可以在项目根目录下创建一个api文件夹，并在其中创建一个新的JavaScript文件（如api.js）。这个文件将专门用于封装和管理API接口。

// src/api/api.js
import axios from 'axios';
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置API的baseUrl
  timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加Token
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 可以在这里处理响应数据
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
export default service;

二、配置axios实例

接下来，在api.js文件中配置axios实例。通过创建一个axios实例，可以在其中设置一些全局配置，如baseURL、超时时间、请求和响应拦截器等。

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 设置API的baseUrl
  timeout: 5000 // 请求超时时间
});

三、创建接口请求函数

在配置好axios实例后，可以开始创建具体的接口请求函数。可以将这些函数按模块划分，如用户管理、商品管理等，分别进行封装。

// src/api/user.js
import service from './api';
// 用户登录
export function login(data) {
  return service({
    url: '/user/login',
    method: 'post',
    data
  });
}
// 获取用户信息
export function getUserInfo(token) {
  return service({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}

// src/api/product.js
import service from './api';
// 获取商品列表
export function getProductList(params) {
  return service({
    url: '/product/list',
    method: 'get',
    params
  });
}
// 获取商品详情
export function getProductDetail(id) {
  return service({
    url: `/product/detail/${id}`,
    method: 'get'
  });
}

四、在组件中调用API接口

在组件中调用封装好的API接口非常简单，只需要引入相应的API模块并调用对应的函数即可。

// src/views/Login.vue
<template>
  <div>
    <input v-model="username" placeholder="Username"/>
    <input v-model="password" type="password" placeholder="Password"/>
    <button @click="handleLogin">Login</button>
  </div>
</template>
<script>
import { login } from '@/api/user';
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await login({ username: this.username, password: this.password });
        // 处理登录成功逻辑
        console.log(response);
      } catch (error) {
        // 处理登录失败逻辑
        console.error(error);
      }
    }
  }
};
</script>

// src/views/ProductList.vue
<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>
<script>
import { getProductList } from '@/api/product';
export default {
  data() {
    return {
      products: []
    };
  },
  async created() {
    try {
      const response = await getProductList();
      this.products = response.data;
    } catch (error) {
      console.error(error);
    }
  }
};
</script>

五、总结

封装Vue接口的方法主要包括：1、创建独立的API文件，2、配置axios实例，3、创建接口请求函数，4、在组件中调用API接口。这些步骤可以有效地组织和管理项目中的API请求，提高代码的复用性和可维护性。

创建独立的API文件可以使代码更加清晰和易于维护。
配置axios实例可以设置全局的请求和响应拦截器，统一处理请求和响应。
创建接口请求函数可以将API请求按模块划分，便于管理。
在组件中调用封装好的API接口可以简化组件中的代码逻辑。

为了进一步提高代码质量，可以考虑使用TypeScript对接口请求函数的参数和返回值进行类型检查，以及使用Vuex进行全局状态管理。