vue项目封装api接口

Vue项目封装API接口可以通过创建一个独立的文件夹来组织API相关的代码。首先，在该文件夹中创建一个名为`api.js`的文件用于定义API接口。

在`api.js`文件中，我们可以使用Axios来发送HTTP请求。Axios是一个基于Promise的HTTP客户端，可以使我们更方便地与后端服务器进行通信。

首先，我们需要在`api.js`文件中导入Axios：

import axios from 'axios';

接下来，我们可以创建一个API对象，其中包含我们向后端发送请求的各种方法。例如，我们可以创建一个`getUserInfo`的方法来获取用户信息：

const API = {
  getUserInfo() {
    return axios.get('/api/user');
  },
  // 其他方法...
}

在这个示例中，`getUserInfo`方法发送了一个GET请求到`/api/user`接口，并返回了一个Promise对象。我们可以在组件中使用该方法来获取用户信息：

import API from './api.js';

export default {
  mounted() {
    API.getUserInfo()
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  },
  // 其他代码...
}

通过这种方式，我们可以将所有与API相关的代码集中到一个文件中，使项目结构更加清晰和易于维护。同时，将API接口封装起来也可以提高代码的重用性，并且在后续需要更改API请求的时候，只需要修改`api.js`文件，而不需要修改每个使用到该API的组件。