在 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）。