在 Vue.js 中，我们经常需要处理异步请求。异步请求是指在发送请求时，不会阻塞主线程，而是在后台进行。在异步请求完成后，我们需要对返回的数据进行处理，这就需要使用异步编程。
在过去，我们使用回调函数或者 Promise 来处理异步请求，但是这些方法都有一些缺点。回调函数会导致嵌套过深，代码难以维护；而 Promise 的 then 函数也需要嵌套过多，代码也不够简洁。因此，ES2017 引入了 async/await，它可以让我们更加方便地处理异步请求。
什么是 async/await？
async/await 是 ES2017 引入的异步编程解决方案。它可以让我们使用同步的方式编写异步代码。async/await 是基于 Promise 的，它可以让我们更加方便地处理 Promise 对象。
async/await 的作用是让异步代码看起来像同步代码，从而让代码更加易读、易懂。async/await 的基本语法如下：
async function test() {
const result = await doSomething();
return result;
}在 async 函数中，我们可以使用 await 关键字来等待一个 Promise 对象完成。当 await 关键字后面的 Promise 对象完成后，它会返回 Promise 的结果。如果 Promise 被 reject 了，那么会抛出一个错误。
在 Vue.js 中使用 async/await
在 Vue.js 中，我们经常需要处理异步请求。例如，我们需要从服务器获取数据，然后将数据显示在页面上。在过去，我们可能会使用以下代码来处理异步请求：
axios.get('/api/data').then(response => {
this.data = response.data;
}).catch(error => {
console.log(error);
});这种方式虽然可以处理异步请求，但是代码难以维护。如果我们使用 async/await，代码会更加简洁：
async getData() {
try {
const response = await axios.get('/api/data');
this.data = response.data;
} catch (error) {
console.log(error);
}
}在上面的代码中，我们使用 async/await 来处理异步请求。首先，我们使用 async 关键字定义一个异步函数。在这个函数中，我们使用 try/catch 语句来处理 Promise 对象。在 try 语句中，我们使用 await 关键字来等待 axios.get 方法返回的 Promise 对象。当 Promise 对象完成后，它会返回一个 response 对象，我们可以使用它来获取服务器返回的数据。
如果 Promise 对象被 reject 了，那么它会抛出一个错误。我们可以使用 catch 语句来捕获这个错误，并进行处理。
示例代码
下面是一个完整的示例代码，它演示了如何在 Vue.js 中使用 async/await 处理异步请求：
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ----------------- ---------- -------
-----
------
-----------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
------ --
--
--
--------- -
---------------
--
-------- -
----- --------- -
--- -
----- -------- - ----- ------------------------
---------- - --------------
- ----- ------- -
-------------------
-
-
-
--
---------在上面的代码中，我们定义了一个 Vue.js 组件，并在 created 钩子函数中调用了 getData 方法。在 getData 方法中，我们使用 async/await 处理了异步请求。当 Promise 对象完成后，我们将服务器返回的数据赋值给 items 数组，然后在模板中使用 v-for 指令将数据渲染到页面上。
总结
async/await 是 ES2017 引入的异步编程解决方案。它可以让我们更加方便地处理异步请求。在 Vue.js 中，我们可以使用 async/await 来处理异步请求，让我们的代码更加简洁、易读、易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66066692d10417a222498e93