JavaScript async/await
- 异步函数定义:使用
async
关键字定义的函数是异步函数,它返回一个Promise对象。 - await关键字使用:在
async
函数内部,await
关键字用于等待异步操作完成,直到Promise解决(resolve)或拒绝(reject)。 - 错误处理和优势:
async
函数中错误处理可以通过try/catch
块或catch()
方法实现,这种方法比使用回调或Promise更具可读性,调试也更简单。
我们使用 async
关键字与函数一起表示该函数是一个异步函数。异步函数返回一个 promise。
async
函数的语法是:
async function name(parameter1, parameter2, ...paramaterN) {
// 语句
}
这里,
- name - 函数的名称
- parameters - 传递给函数的参数
示例:异步函数
// 异步函数示例
async function f() {
console.log("异步函数。");
return Promise.resolve(1);
}
f();
输出
异步函数。
在上述程序中,函数前使用 async
关键字表示该函数是异步的。
由于此函数返回 promise,你可以像这样使用链式方法 then()
:
async function f() {
console.log("异步函数。");
return Promise.resolve(1);
}
f().then(function (result) {
console.log(result);
});
输出
异步函数;
1;
在上述程序中,f()
函数被解决,then()
方法得到执行。
JavaScript await 关键字
await
关键字用于 async
函数内等待异步操作。
使用 await 的语法是:
let result = await promise;
使用 await
会暂停 async 函数,直到 promise 返回结果(解决或拒绝)。例如,
// 一个 promise
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Promise 已解决");
}, 4000);
});
// 异步函数
async function asyncFunc() {
// 等待 promise 解决
let result = await promise;
console.log(result);
console.log("hello");
}
// 调用异步函数
asyncFunc();
输出
Promise 已解决
hello
在上述程序中,创建了一个 Promise
对象,它在 4000 毫秒后被解决。这里,使用 async
函数编写了 asyncFunc()
函数。
await
关键字等待 promise 完成(解决或拒绝)。
let result = await promise;
因此,只有在 promise 的值对变量 result 可用后,才显示 hello。
在上述程序中,如果不使用 await
,hello 将在 Promise resolved 之前显示。
注意:你只能在异步函数内使用 await
。
异步函数允许以看似同步的方式执行异步方法。尽管操作是异步的,但看起来操作是以同步方式执行的。
如果程序中有多个 promise,这会非常有用。例如,
let promise1;
let promise2;
let promise3;
async function asyncFunc() {
let result1 = await promise1;
let result2 = await promise2;
let result3 = await promise3;
console.log(result1);
console.log(result1);
console.log(result1);
}
在上述程序中,await
等待每个 promise 完成。
错误处理
在使用 async
函数时,你以同步方式编写 代码。你也可以使用 catch()
方法来捕获错误。例如,
asyncFunc()
.catch
// 捕获错误并做些事情
();
另一种处理错误的方式是使用 try/catch
块。例如,
// 一个 promise
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Promise 已解决");
}, 4000);
});
// 异步函数
async function asyncFunc() {
try {
// 等待 promise 解决
let result = await promise;
console.log(result);
} catch (error) {
console.log(error);
}
}
// 调用异步函数
asyncFunc(); // Promise 已解决
在上面的程序中,我们使用了try/catch
块来处理错误。如果程序成功运行,它将进入try
块。如果程序抛出错误,它将进入catch
块。
要了解更多关于try/catch
的详细信息,请访问 JavaScript JavaScript try/catch。
使用异步函数的好处
注意:这两个关键字async/await
是在 JavaScript 的新版本(ES8)中引入的。一些较旧的浏览器可能不支持使用 async/await。要了解更多,请访问 JavaScript async/await 浏览器支持。