Vue3 中如何调用接口

在Vue3的开发中，调用接口是与后端进行数据交互的重要环节。下面将详细介绍在Vue3中调用接口的常见方法和步骤。

准备工作

需要确保项目中已经安装了用于发送HTTP请求的库，比如axios。Axios是一个基于Promise的HTTP客户端，在Vue项目中被广泛使用。可以通过npm或者yarn进行安装。

封装请求方法

为了方便在项目中多次调用接口，通常会对axios进行封装。创建一个专门的js文件，在其中配置axios的基本信息，如请求的基础URL、请求头设置等。可以定义不同的请求方法，如get、post等。

例如：

import axios from 'axios';

const service = axios.create({
  baseURL: 'http://your-api-url',
  timeout: 5000 
});

export const getRequest = (url, params) => {
  return service.get(url, { params });
};

export const postRequest = (url, data) => {
  return service.post(url, data);
};

在组件中调用接口

在Vue组件中，引入封装好的请求方法。当需要获取数据时，在合适的生命周期钩子函数中调用接口。一般来说，onMounted钩子函数常用于在组件挂载后立即获取数据。

例如：

<template>
  <div>
    <ul v-for="item in dataList" :key="item.id">
      <li>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getRequest } from '@/api/index'; 

const dataList = ref([]);

onMounted(() => {
  getRequest('/api/data').then((response) => {
    dataList.value = response.data;
  });
});
</script>

错误处理

在调用接口时，可能会出现网络错误、服务器错误等情况。需要对请求进行错误处理。可以在封装的请求方法中统一处理错误，也可以在组件中针对具体的请求进行错误处理。

在Vue3中调用接口需要进行适当的准备工作、封装请求方法、在组件中正确调用并进行错误处理，这样才能确保数据交互的稳定性和可靠性。