vue3怎么请求接口

在 Vue 3 中，你可以使用多种方式来请求接口（API）。最常见的方法是使用原生的 fetch API 或流行的第三方库如 Axios。以下是使用这两种方法分别进行 API 请求的示例。

使用 Fetch API

Fetch 是一个现代的、基于 Promise 的网络 API，用于执行 HTTP 请求。以下是一个简单的示例，展示如何在 Vue 3 组件中使用 Fetch API 请求数据。

javascript复制代码

	<template>
	<div>
	<h1>Fetch API Example</h1>
	<ul v-if="data && data.length">
	<li v-for="item in data" :key="item.id">{{ item.name }}</li>
	</ul>
	<p v-else>Loading...</p>
	</div>
	</template>
	<script>
	export default {
	data() {
	return {
	data: null,
	error: null,
	};
	},
	async mounted() {
	try {
	const response = await fetch('https://api.example.com/data');
	if (!response.ok) {
	throw new Error('Network response was not ok');
	}
	this.data = await response.json();
	} catch (error) {
	this.error = error.message;
	console.error('There was a problem with your fetch operation:', error);
	}
	},
	};
	</script>

使用 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js。它提供了更简洁的 API 和更多的功能（如自动转换 JSON 数据、取消请求等）。

首先，你需要安装 Axios。你可以使用 npm 或 yarn：

bash复制代码

	npm install axios
	# or
	yarn add axios

然后，你可以在 Vue 3 组件中使用 Axios 来进行 API 请求。

javascript复制代码

	<template>
	<div>
	<h1>Axios Example</h1>
	<ul v-if="data && data.length">
	<li v-for="item in data" :key="item.id">{{ item.name }}</li>
	</ul>
	<p v-else>Loading...</p>
	<p v-if="error">{{ error }}</p>
	</div>
	</template>
	<script>
	import axios from 'axios';
	export default {
	data() {
	return {
	data: null,
	error: null,
	};
	},
	async mounted() {
	try {
	const response = await axios.get('https://api.example.com/data');
	this.data = response.data;
	} catch (error) {
	this.error = error.message;
	console.error('There was a problem with your axios operation:', error);
	}
	},
	};
	</script>

注意事项

1. 跨域请求：如果你在开发环境中遇到跨域请求问题（CORS），确保你的后端服务器允许来自你前端应用域的请求。
2. 错误处理：始终处理错误情况，并给用户提供友好的反馈。
3. 环境变量：在生产环境中，不要将 API URL 直接硬编码在代码中，使用 Vue CLI 提供的 .env 文件来管理环境变量。

以上示例展示了如何在 Vue 3 中使用 Fetch API 和 Axios 进行 API 请求。选择哪种方法取决于你的具体需求和偏好。