Vue中如何封装接口

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

1. 安装Axios

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

npm install axios  
# 或者  
yarn add axios

2. 创建API服务

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

// 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服务来使用封装的接口了。

<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>