JS中的 async 和 await 使用技巧
一、概述
案例:
async function asyncReadFile () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
asyncReadFile();
async
表示函数里有异步操作,await
表示紧跟在后面的表达式需要等待结果。 await
命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,它们会被自动转成立即 resolved 的 Promise 对象)。
async
函数的返回值是 Promise 对象,可以用 then
方法指定下一步的操作。进一步说,async
函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而 await
命令就是内部 then
命令的语法糖。
二、基本用法
(1)async
async
函数返回一个 Promise 对象,可以使用 then
方法添加回调函数。当函数执行的时候,一旦遇到 await
就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。async
函数内部 return
语句返回的值,会成为 then
方法回调函数的参数。
async function f() {
return 'hello'
}
console.log(f()); // promise对象
f().then(result => {
console.log(result); // hello
})
async
函数内部抛出错误,会导致返回的 Promise 对象变为 rejec
t状态。抛出的错误对象会被 catch
方法回调函数接收到。
async function f() {
throw new Error('出错了')
}
f().then(result => {
console.log(result);
}).catch(err => {
console.log(err); // Uncaught (in promise) Error: 出错了
})
(2)await
正常情况下,await
命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。另外,await
命令只能用在 async
函数之中,如果用在普通函数,就会报错。
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123
await
命令后面的 Promise 对象如果变为 reject
状态,则 reject
的参数会被 catch
方法的回调函数接收到。等同于async函数返回的 Promise 对象被reject。
async function f() {
await Promise.reject('出错了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了
上面代码中,await语句前面没有return,但是reject方法的参数依然传入了catch方法的回调函数。这里如果在await前面加上return,效果是一样的。
任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
(3)使用注意事项
await
命令后面的 Promise对象,运行结果可能是 rejected
,所以最好把 await
命令放在 try...catch
代码块中。
async function myFunction() {
try {
await test();
} catch (err) {
console.log(err);
}
}
// 另一种写法
async function myFunction() {
await test().catch(function (err) {
console.log(err);
});
}
(4)案例
案例1:
async function f2() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello')
},1000)
})
// await 后应该是一个 Promise 对象,如果不是,会被转成一个 Promise 对象
// await必须配合 async 来使用
let result = await promise; // 一个表达式,表达式的值就是 promise 所返回的值
console.log(result);
console.log(await 4);
console.log(2);
return 3; // 相当于:return Promise.resolve(3)
}
f2().then(result => {
console.log(result);
})
// hello
// 4
// 2
// 3
案例2: 借助await命令就可以让程序停顿指定的时间,实现休眠效果。
function sleep(internal) {
return new Promise(resolve => {
setTimeout(resolve, internal);
})
}
async function f3() {
for (let i = 0; i < 5; i++) {
console.log(i);
await sleep(100);
}
}
f3();
相关文章
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- js 前进 后退 刷新
- JS基础——cssText的用法[通俗易懂]
- 用JS获取地址栏url参数的方法_js的url是啥
- 酷炫一款动态背景(HTML +js canvas)
- 【说站】js中typeof操作符是什么
- Js排序算法_js 排序算法
- JS获取当前年份_js获取当前时间年月日
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js正则表达式基础知识
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- JS变量的作用域
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 使用JS实现Redis数据读取(js读取redis)
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- 妙用JS获取Oracle信息的快速方法(js获取Oracle)
- 使用JS在网页中连接Oracle数据库(js网页链接oracle)
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- 通过js脚本复制网页上的一个表格的不错实现方法
- js动态添加标签(新增一行,其实很简单,就是几个函数的应用)
- 上传图片时JS自动显示图片
- js获取、清空inputtype="file"的值(示例代码)