用vue实现接口封装案例

非常感谢您的提问！以下是一个使用 Vue 实现接口封装的案例：

首先，我们需要安装 axios，这是一个用于发送 HTTP 请求的库。可以使用以下命令进行安装：

npm install axios

接下来，我们可以创建一个 api.js 文件，用于封装我们的接口：

import axios from 'axios';

const API_BASE_URL = 'https://example.com/api';

export default {
  getPosts() {
    return axios.get(`${API_BASE_URL}/posts`);
  },

  getPost(id) {
    return axios.get(`${API_BASE_URL}/posts/${id}`);
  },

  createPost(data) {
    return axios.post(`${API_BASE_URL}/posts`, data);
  },

  updatePost(id, data) {
    return axios.put(`${API_BASE_URL}/posts/${id}`, data);
  },

  deletePost(id) {
    return axios.delete(`${API_BASE_URL}/posts/${id}`);
  },
};

在这个文件中，我们定义了一些常用的接口方法，例如获取所有文章、获取单个文章、创建文章、更新文章和删除文章。这些方法都返回一个 Promise 对象，可以使用 async/await 或者 .then()/.catch() 进行处理。

接下来，我们可以在 Vue 组件中使用这些接口方法：

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <router-link :to="{ name: 'post', params: { id: post.id } }">{{ post.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import api from './api';

export default {
  data() {
    return {
      posts: [],
    };
  },

  async created() {
    try {
      const response = await api.getPosts();
      this.posts = response.data;
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

在这个组件中，我们使用了 api.js 中的 getPosts() 方法来获取所有文章，并将结果保存在组件的 data 中。在 created 生命周期钩子中，我们使用 async/await 来处理异步请求，并使用 try/catch 来捕获错误。

以上就是一个简单的使用 Vue 实现接口封装的案例。希望能对您有所帮助！