Vue中如何封装接口

在Vue项目中封装接口通常是指将HTTP请求（如GET、POST等）封装成可复用的函数或方法，以便于在组件中方便地调用。这样的封装有助于减少代码重复，增强代码的可维护性和可读性。以下是一个基于Vue和Axios（一个基于Promise的HTTP客户端，用于浏览器和node.js）的接口封装示例。

1. 安装Axios

首先，确保你的项目中已经安装了Axios。如果还没有安装，可以通过npm或yarn来安装它：

bash 复制代码

npm install axios  
# 或者  
yarn add axios

2. 创建API服务

在项目的src目录下，你可以创建一个api目录，并在其中创建一个index.js文件（或根据需要分成多个文件），用于定义和导出你的API服务。

javascript 复制代码

// src/api/index.js  
import axios from 'axios';  
  
// 创建axios实例  
const service = axios.create({  
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url  
  timeout: 5000 // 请求超时时间  
});  
  
// 请求拦截器  
service.interceptors.request.use(  
  config => {  
    // 在发送请求之前做些什么  
    // 例如设置请求头  
    if (store.getters.token) {  
      config.headers['X-Token'] = getToken();  
    }  
    return config;  
  },  
  error => {  
    // 对请求错误做些什么  
    console.error('请求出错：', error); // for debug  
    Promise.reject(error);  
  }  
);  
  
// 响应拦截器  
service.interceptors.response.use(  
  response => {  
    /**  
     * code为非200是抛错 可通过配置白名单 字典来对接接口状态码  
     * 附带错误信息  
     * 以下为简单处理，根据业务需求，可以调整  
     */  
    const res = response.data;  
    if (res.code !== 200) {  
      console.error('错误码：', res.code); // for debug  
      // 可以在这里处理错误，比如使用Message.error等  
      return Promise.reject(new Error(res.message || 'Error'));  
    } else {  
      return res;  
    }  
  },  
  error => {  
    console.error('响应出错：', error); // for debug  
    return Promise.reject(error);  
  }  
);  
  
// 示例API  
export function fetchUser(userId) {  
  return service.get(`/users/${userId}`);  
}  
  
export function postData(url, data) {  
  return service.post(url, data);  
}  
  
// 导出service，可能其他页面也需要使用  
export default service;

3. 在组件中使用API

现在，你可以在Vue组件中通过导入API服务来使用封装的接口了。

html 复制代码

<template>  
  <div>  
    <button @click="getUser">获取用户信息</button>  
  </div>  
</template>  
  
<script>  
import { fetchUser } from '@/api/index'; // 根据实际路径导入  
  
export default {  
  methods: {  
    async getUser() {  
      try {  
        const user = await fetchUser(1); // 假设获取用户ID为1的用户信息  
        console.log(user);  
      } catch (error) {  
        console.error('获取用户信息失败：', error);  
      }  
    }  
  }  
}  
</script>

结论

以上就是一个基本的Vue项目中封装接口的例子。通过Axios实例的配置和拦截器的使用，你可以很方便地管理请求和响应的公共逻辑，如设置请求头、处理响应数据等。同时，将接口封装成独立的函数，有助于保持组件的简洁和复用性。