17、前端开发：异步处理、数据获取与组件架构全解析

前端开发：异步处理、数据获取与组件架构全解析

1. 使用 Async/Await 创建简洁函数

在处理异步操作时，Promise 相较于回调函数有了很大的改进，但它的接口仍有些繁琐，在方法中还是要使用回调。而现在，我们可以借助 async/await 来简化 Promise 的使用。

async/await 实际上包含两个独立的操作。 async 关键字用于声明一个封装函数将使用异步数据，而在这个异步函数内部， await 关键字可使函数暂停，直到返回一个值。

不过，需要注意两点：一是 async/await 并不会取代 Promise，它只是用更好的语法封装了 Promise；二是它的支持情况不太理想，编译后的代码可能会有一些小问题，在服务器端 JavaScript 中使用比较安全，但在浏览器中可能会出现问题。

下面通过一个例子来看看 async/await 的实际应用。假设我们有一个 getUserPreferences() 函数，之前我们是这样使用的：

getUserPreferences()
.then(preferences => {
    console.log(preferences.theme);
});
// 'dusk'

现在，我们可以将其封装在一个新的函数中：