在Vue组件中使用封装的接口

在 Vue 组件中使用封装的接口，需要先通过 import 导入封装好的 API 请求函数，然后在组件的生命周期钩子函数或方法中调用这些函数。

下面是一个详细的示例，展示如何在 Vue 组件中使用封装的接口。

示例项目结构

src/
|-- api/
|   |-- request.js
|   |-- user.js
|   |-- data.js
|-- components/
|   |-- ExampleComponent.vue
|-- main.js
|-- App.vue

1. 封装 API 请求

request.js

首先，创建 request.js 文件来封装基础的 axios 请求配置：

// src/api/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: 'http://localhost:3000/api', // 基础URL，根据实际情况修改
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做一些事情，比如在请求头中添加Authorization字段
    config.headers['Authorization'] = 'Bearer your-token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

user.js

然后，创建 user.js 文件封装用户相关的 API 请求：

// src/api/user.js
import request from './request';

export function login(username, password) {
  return request({
    url: '/login',
    method: 'post',
    data: {
      username,
      password
    }
  });
}

export function getUserInfo() {
  return request({
    url: '/user/info',
    method: 'get'
  });
}

data.js

最后，创建 data.js 文件封装数据相关的 API 请求：

// src/api/data.js
import request from './request';

export function fetchData() {
  return request({
    url: '/data',
    method: 'get'
  });
}

2. 在Vue组件中使用封装的接口

ExampleComponent.vue

创建一个Vue组件 ExampleComponent.vue，在组件中使用封装好的接口：

<template>
  <div>
    <button @click="handleLogin">Login</button>
    <button @click="handleFetchData">Fetch Data</button>
    <div>{{ result }}</div>
  </div>
</template>

<script>
import { login } from '@/api/user';
import { fetchData } from '@/api/data';

export default {
  data() {
    return {
      result: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await login('user', 'password');
        this.result = response;
      } catch (error) {
        console.error('Error logging in:', error);
      }
    },
    async handleFetchData() {
      try {
        const response = await fetchData();
        this.result = response;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>

解释

1. 导入封装好的接口：

   • 使用 import 语句从 user.js 和 data.js 中导入封装好的 API 请求函数。

2. 定义组件的状态和方法：

   • 使用 data 函数定义组件中的状态变量 result。
   • 使用 methods 对象定义处理按钮点击事件的方法 handleLogin 和 handleFetchData。

3. 调用封装好的 API 请求：

   • 在 handleLogin 和 handleFetchData 方法中，分别调用 login 和 fetchData 函数，并处理返回的响应数据。

3. 主文件设置

main.js

确保在 main.js 中正确设置 Vue 实例：

// src/main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

确保您的 App.vue 正确引入并使用 ExampleComponent：

<template>
  <div id="app">
    <ExampleComponent />
  </div>
</template>

<script>
import ExampleComponent from './components/ExampleComponent.vue';

export default {
  name: 'App',
  components: {
    ExampleComponent
  }
};
</script>

补充

• 环境配置：使用环境变量 (.env) 配置不同环境下的 baseURL。

  # .env 文件
  VUE_APP_API_BASE_URL=http://localhost:3000/api

在 request.js 中使用：

  const service = axios.create({
    baseURL: process.env.VUE_APP_API_BASE_URL,
    timeout: 5000,
  });

• 错误处理：在 request.js 中统一处理错误信息，并在组件中处理具体逻辑。

• 常量配置：在项目中使用常量配置文件存储常用的字符串和配置项。