1. 简介
在 JavaScript 中，async/await 是一种处理异步操作的方式。在使用 async/await 函数时，我们会遇到访问对象属性的问题。本篇文章将介绍如何访问从 async() 函数中返回的结果的对象属性。
2. async/await
在介绍如何访问 async() 函数返回结果的对象属性之前，我们先来了解一下 async/await。
async/await 是 ECMAScript 2017 中引入的一种处理异步操作的方式。它以同步的方式组织异步代码，使得异步操作的代码可以像同步操作一样易于理解。
下面是一个使用 async/await 的例子：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
const result = await getData();
console.log(result);
在上面的例子中，我们定义了一个名为 getData 的 async 函数。函数中使用 await 等待从 API 获取数据，然后返回获取到的数据，并存储在变量 result 中。
在使用 async/await 时，我们需要注意以下几点：
async/await 只能用于处理 Promise 对象的异步操作。
async 函数返回一个 Promise 对象。
await 只能在 async 函数内部使用。
await 右侧的表达式应该返回一个 Promise 对象。
3. 访问 async() 函数返回结果的对象属性
在使用 async/await 函数时，我们可能会遇到访问返回结果的对象属性的问题。例如：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
message: 'Data loaded successfully',
data: data
};
}
const result = await getData();
console.log(result.message);
在上面的例子中，我们可以通过访问 result.message 读取返回结果中的 message 属性。
然而，有时候我们会遇到访问返回结果中的深层属性的情况。例如：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
message: 'Data loaded successfully',
data: {
user: {
name: 'John Doe',
age: 30
}
}
};
}
const result = await getData();
console.log(result.data.user.name);
在上面的例子中，我们可以通过访问 result.data.user.name 读取返回结果中的 user 对象的 name 属性。
如果返回结果中的对象属性的值是 Promise 对象，我们该如何访问呢？例如：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
message: 'Data loaded successfully',
user: getUserId() // getUserId() 返回一个 Promise 对象
};
}
const result = await getData();
console.log(result.user);
要访问返回结果中的 Promise 对象的值，我们需要使用 then() 方法。例如：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
message: 'Data loaded successfully',
user: getUserId() // getUserId() 返回一个 Promise 对象
};
}
const result = await getData();
result.user.then(userId => {
console.log(userId);
});
在上面的例子中，我们使用 then() 方法访问 Promise 对象的值。
3.1 async/await 中的错误处理
在 async/await 中，我们可以使用 try/catch 处理 Promise 对象的 reject。例如：
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
message: 'Data loaded successfully',
user: getUserId() // getUserId() 返回一个 Promise 对象
};
} catch (error) {
console.error(error);
}
}
const result = await getData();
console.log(result);
在上面的例子中，我们使用 try/catch 处理了从 API 获取数据的错误，并打印了错误信息。在 catch 中返回的值将作为 Promise 对象的 resolve 值。因此，在调用 getData 函数时，result 仍然会得到一个 Promise 对象。
4. 总结
在 JavaScript 中使用 async/await 函数是一种便捷的方式来处理异步操作。在访问从 async() 函数返回的结果的对象属性时，我们可以直接访问属性，或者使用 then() 方法访问 Promise 对象的值。我们也可以使用 try/catch 处理 async/await 中的错误。