vue3 的await async

在 Vue 3（以及大多数现代的 JavaScript 环境中）中，async 和 await 是用来处理异步操作的关键字。这些关键字使你能够以同步的方式编写异步代码，使代码更加易读、易写，并且有助于管理异步流程。

async

async 关键字用于声明一个函数是异步的。这意味着该函数总是返回一个 Promise。如果函数返回一个值，则 Promise 将解析为该值。如果函数抛出一个错误，则 Promise 将被拒绝，并带有该错误。

javascript复制代码

	async function fetchData() {
	// 这里可以调用其他返回 Promise 的函数
	const response = await fetch('https://api.example.com/data');
	const data = await response.json();
	return data;
	}

await

await 关键字只能在 async 函数内部使用。它会暂停异步函数的执行，等待 Promise 解析，然后恢复异步函数的执行并返回解析的值。

javascript复制代码

	async function fetchData() {
	try {
	const response = await fetch('https://api.example.com/data'); // 等待 fetch 完成
	const data = await response.json(); // 等待 JSON 解析完成
	return data;
	} catch (error) {
	console.error('An error occurred:', error);
	}
	}

在 Vue 3 中使用 async/await

在 Vue 3 中，你可能会在方法（methods）、生命周期钩子（lifecycle hooks）、组合式 API（Composition API）的 setup 函数或自定义钩子（custom hooks）中使用 async/await。

例如，在组合式 API 的 setup 函数中使用 async/await：

javascript复制代码

	import { ref } from 'vue';
	export default {
	setup() {
	const data = ref(null);
	async function fetchData() {
	try {
	const response = await fetch('https://api.example.com/data');
	const jsonData = await response.json();
	data.value = jsonData;
	} catch (error) {
	console.error('An error occurred:', error);
	}
	}
	// 在组件加载时获取数据
	fetchData();
	return {
	data
	};
	}
	};

在这个例子中，fetchData 是一个异步函数，它在 setup 函数中被调用。当组件加载时，它会从 API 获取数据，并将数据存储在 data 响应式引用中。

错误处理

当使用 async/await 时，务必注意错误处理。你可以使用 try/catch 块来捕获任何可能在异步操作中抛出的错误。

javascript复制代码

	async function fetchData() {
	try {
	const response = await fetch('https://api.example.com/data');
	const data = await response.json();
	return data;
	} catch (error) {
	console.error('An error occurred:', error);
	throw error; // 重新抛出错误以便在更高级别的代码中进行处理
	}
	}

总之，async/await 是 Vue 3（以及现代 JavaScript）中处理异步操作的一种强大而简洁的方式。它们使异步代码更易于理解和维护，并有助于避免回调地狱（Callback Hell）。