vue的项目添加全局接口请求封装，并通过配置文件使接口请求变得更简洁易用

1. 安装 Axios

首先，确保你已经安装了 ​​axios​​，它将作为 HTTP 请求库。

npm install axios

2. 创建全局接口请求封装

在你的项目中，创建一个新的文件夹 ​​src/utils​​​，并在其中创建一个 ​​api.js​​ 文件来封装你的请求方法。

​​src/utils/api.js​​

import axios from 'axios';

// 创建 axios 实例

const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || 'https://your-api-url.com', // 你的 API 基础 URL
  timeout: 10000,  // 请求超时时间
});

// 请求拦截器

api.interceptors.request.use(
  (config) => {
    // 可以在这里添加请求头、token 等处理逻辑
    // 例如，添加 Authorization token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器


api.interceptors.response.use(
  (response) => {
    // 可以在这里对返回的数据进行统一处理
    return response.data;
  },
  (error) => {
    // 处理错误
    return Promise.reject(error);
  }
);

export default api;这个封装的 ​​api.js​​​ 使用了 Axios 实例来发送请求，并通过拦截器来统一处理请求和响应逻辑，比如添加 ​​Authorization​​ token 或者统一的错误处理。

3. 配置接口名

然后，你可以为每个接口创建一个单独的配置文件，在该文件中设置接口名称和请求方法。

​​src/api/index.js​​

import api from '@/utils/api';

// 配置接口

const apiConfig = {
  // 用户相关接口
  userLogin: (data) => api.post('/user/login', data), // 登录
  getUserInfo: () => api.get('/user/info'),  // 获取用户信息
  
  // 其他接口...
  getProductList: () => api.get('/product/list'),
  getProductDetails: (id) => api.get(`/product/details/${id}`)
};

export default apiConfig;这里，你可以定义不同的接口方法，每个方法调用时可以直接使用 ​​api​​ 封装好的请求方式。

4. 在组件中调用接口

接下来，在 Vue 组件中，直接引入 ​​api.js​​ 配置好的接口，并进行调用。

​​src/components/Example.vue​​

<template>
  <div>
    <h1>用户信息</h1>
    <p v-if="loading">加载中...</p>
    <p v-else>{{ userInfo }}</p>
  </div>
</template>

<script>
import apiConfig from '@/api';  // 引入 api 配置文件

export default {
  data() {
    return {
      userInfo: null,
      loading: true,
    };
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo() {
      try {
        const data = await apiConfig.getUserInfo();  // 调用接口
        this.userInfo = data;
      } catch (error) {
        console.error('获取用户信息失败', error);
      } finally {
        this.loading = false;
      }
    }
  }
};

在上面的示例中，我们使用了 ​​apiConfig.getUserInfo()​​ 来请求接口，并且处理了加载状态和请求的错误。

5. 配置 ​​.env​​ 文件

为了更好的管理不同环境下的 API URL，可以在 ​​.env​​​ 文件中配置 ​​VUE_APP_API_BASE_URL​​ 变量：

​​.env​​

VUE_APP_API_BASE_URL=https://your-api-url.com

这样就可以根据不同的环境配置不同的 API 基础 URL。
现在已经创建了全局的接口请求封装，并通过单独的配置文件管理各个接口。这样，页面只需要引入 ​​api.js​​ 配置文件，直接调用接口方法就能发送请求，非常简洁和方便。