Vue.js 接口请求封装最佳实践：分离请求与组件

可以使用 axios 库进行接口请求的封装。

在 src 目录下新建一个 api 文件夹，用于存放所有的接口请求。
在 api 文件夹下新建一个 index.js 文件，用于统一管理所有的接口请求。
在 index.js 文件中使用 axios 进行封装，如下所示：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080'  // 设置请求的基础URL

export const getUserInfo = () => axios.get('/api/user')  // 获取用户信息
export const login = data => axios.post('/api/login', data)  // 用户登录
export const logout = () => axios.post('/api/logout')  // 用户登出

在需要使用接口请求的组件中，引入 api/index.js 文件，并调用相应的接口函数即可。

import { getUserInfo } from '@/api'

export default {
  created () {
    getUserInfo().then(res => {
      console.log(res.data)
    }).catch(err => {
      console.log(err)
    })
  }
}

这样就可以将发送请求与 .vue 文件分开，方便管理和维护。