VUE3新手教程：借助Vue.js插件封装API接口请求

在Vue 3的开发中，合理封装API接口请求能让代码结构更清晰，提高可维护性。借助Vue.js插件来完成这一任务，是个不错的选择。

要理解为什么需要封装API接口请求。在实际项目里，与后端的数据交互频繁，如果把API请求代码分散在各个组件中，不仅代码冗余，后期维护和修改也会变得困难。通过封装，可以将请求逻辑集中管理。

创建Vue.js插件是第一步。在项目的src目录下，新建一个api文件夹，用于存放所有与API相关的代码。接着创建一个名为apiPlugin.js的文件，这将是我们的插件文件。在这个文件中，首先要引入必要的库，比如axios，它是常用的HTTP请求库。

import axios from 'axios'
const apiPlugin = {
  install(app) {
    // 这里配置axios的基础路径
    const instance = axios.create({
      baseURL: '你的后端接口基础路径'
    })
    // 挂载到app.config.globalProperties上，方便全局使用
    app.config.globalProperties.$api = instance
  }
}
export default apiPlugin

然后，在main.js中引入并使用这个插件。

import { createApp } from 'vue'
import apiPlugin from './api/apiPlugin'
import App from './App.vue'

const app = createApp(App)
app.use(apiPlugin)
app.mount('#app')

这样，在任何组件中都能通过this.$api来发起请求。不过，为了更好的代码组织，可以进一步封装具体的API接口。在api文件夹下，再创建一个user.js文件，专门用于封装用户相关的API。

import { $api } from '@/api/apiPlugin'

// 获取用户信息接口
export const getUserInfo = () => {
  return $api.get('/user/info')
}

// 登录接口
export const login = (data) => {
  return $api.post('/user/login', data)
}

在组件中使用这些封装好的API就变得非常简单。例如：

<template>
  <div>
    <button @click="fetchUserInfo">获取用户信息</button>
  </div>
</template>

<script setup>
import { getUserInfo } from '@/api/user'

const fetchUserInfo = async () => {
  try {
    const response = await getUserInfo()
    console.log(response.data)
  } catch (error) {
    console.error('获取用户信息失败', error)
  }
}
</script>

通过以上步骤，借助Vue.js插件成功封装了API接口请求，让代码更加整洁、高效，为Vue 3项目开发打下良好基础。