编写一个简洁等待的异步代码,可以使用现代JavaScript中的async/await
语法。这种语法使得异步代码看起来和同步代码非常相似,从而提高了代码的可读性和可维护性。
以下是一个简单的示例,展示了如何使用async/await
来等待一个异步操作(例如,从服务器获取数据):
// 模拟一个异步操作,例如从服务器获取数据
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched successfully');
}, 2000);
});
}
// 使用 async/await 编写简洁的异步代码
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// 调用函数
getData();
async/await
使得异步代码看起来像同步代码,更容易理解和维护。try/catch
块来处理异步操作中的错误。await
关键字。async/await
。fetch
或axios
从服务器获取数据。setTimeout
或setInterval
。await
只能在async
函数内部使用// 错误示例
const result = await fetchData(); // SyntaxError
// 正确示例
async function getData() {
const result = await fetchData();
console.log(result);
}
async function getData() {
try {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1, data2);
} catch (error) {
console.error('Error fetching data:', error);
}
}
function fetchWithTimeout(url, options, timeout = 5000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), timeout)
)
]);
}
async function getData() {
try {
const response = await fetchWithTimeout('https://example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
通过以上示例和解释,你应该能够编写出简洁且易于理解的异步代码。
领取专属 10元无门槛券
手把手带您无忧上云