通过定时器实现间隔一秒输出1,在间隔一秒输出2
第一种通过定时器方式实现这个需求
setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
},1000)
},1000)
另一种通过promise来实现
let promise1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1)
},1000)
}).then(res=>{
console.log(res);
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2)
},1000)
})
}).then(res=>{
console.log(res);
})
以上两种方式都需要嵌套,写起来比较麻烦,还有一种比较简洁的写法利用async和await来实现它
什么是async和await
它们是基于promises的语法糖,使异步代码更易于编写和阅读。通过使用它们,异步代码看起来更像是老式同步代码,因此它们非常值得学习。
async关键字
我们使用 async 关键字,把它放在函数声明之前,使其成为 async function。
//一个普通函数hello()
function hello(){
return ‘hello!‘;
}
hello(); //该函数会返回hello!
将这个函数变成异步函数
async function hello(){
return ‘hello!‘
}
hello();
现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。
await关键字
当 await 关键字与异步函数一起使用时,它的真正优势就变得明显了 —— 事实上, await 只在异步函数里面才起作用。它可以放在任何异步的,基于 promise 的函数之前。它会暂停代码在该行上,直到 promise 完成,然后返回结果值。在暂停的同时,其他正在等待执行的代码就有机会执行了。
async function hello() {
return greeting = await Promise.resolve("Hello");
};
hello().then(alert);
最开始提到的需求通过async和await实现的代码
async function func(){
let res;
res = await new Promise((resolve)=>{ //用await来修饰的异步函数,可以简单地理解为把一个异步函数修饰为同步效果,但是这个函数还是异步函数
setTimeout(()=>{
resolve(1)
},1000)
})
console.log(res)
res = await new Promise((resolve)=>{
setTimeout(()=>{
resolve(2)
},1000)
})
console.log(res)
}
func();