vue3 封装 api 接口 并错误处理、给一个简单的案例

好的，下面是一个简单的Vue3封装API接口并处理错误的示例。

1. 创建一个api.js文件，定义封装后的API。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 5000
});

instance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response.data;
    } else {
      return Promise.reject(new Error(`请求出错：${response.statusText}`));
    }
  },
  error => {
    return Promise.reject(new Error(`请求出错：${error.message}`));
  }
);

export default {
  getUsers() {
    return instance.get('/users');
  },
  getUserById(id) {
    return instance.get(`/users/${id}`);
  },
  createUser(user) {
    return instance.post('/users', user);
  },
  updateUser(user) {
    return instance.put(`/users/${user.id}`, user);
  },
  deleteUser(id) {
    return instance.delete(`/users/${id}`);
  }
}

2. 在main.js中将封装后的API添加到app.config.globalProperties上，以便在组件中使用。

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

const app = createApp(App);
app.config.globalProperties.$api = api;
app.mount('#app');

3. 在组件中使用封装后的API，并处理错误。

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
    <button @click="createUser">新增用户</button>
    <div v-if="error" style="color: red">{{ error }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      error: null
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      this.$api.getUsers().then(res => {
        this.users = res;
      }).catch(error => {
        this.error = error.message;
      });
    },
    createUser() {
      const user = { name: 'new user' };
      this.$api.createUser(user).then(() => {
        this.getUsers();
      }).catch(error => {
        this.error = error.message;
      });
    }
  }
};
</script>

这样，我们就可以通过this.$api来调用封装后的API，并在调用过程中处理错误信息。同时，由于使用了axios的拦截器，在请求返回状态码不为200时也会抛出错误信息。