一、入门例子1
我们在没有使用asyns/await时，先看下面的代码：
var sleep=function () {
setTimeout(()=>{
console.log("我在中间执行")
},5000)
};
var start= function () {
try{
console.log("我最先执行");
sleep() ;
setTimeout(()=>{
console.log("我最后执行");
},2000)
} catch(error){
console.log("出错了",error)
}
};
start();
上述代码运行结果
image.png
显然，这段代码是同步执行的，没有满足我们的预期，使用asyns/await异步可以轻松解决：
var sleep=function () {
return new Promise(function (reslove,reject) {
setTimeout(()=>{
console.log("我在中间执行")
reslove();
},5000)
})
};
var start= async function () {
try{
console.log("我最先执行");
await sleep() ;
setTimeout(()=>{
console.log("我最后执行");
},2000)
} catch(error){
console.log("出错了",error)
}
};
start();
上述代码运行结果
image.png
使用asyns/await需要注意的是：
1、await 必须在async 声明的函数的上下文中；
2、 await 后面跟的函数应该返回的是promise对象，否则其它返回值就没意义了；
二、入门例子2--传递数据
上面例子中promise没有传数据，这次稍微修改下
var sleep=function () {
return new Promise(function (reslove,reject) {
setTimeout(()=>{
console.log("我在中间执行")
reslove("我是数据哦");
},4000)
})
};
var start= async function () {
try{
console.log("我最先执行");
let data=await sleep() ;
console.log("我最后执行，我得到的数据是：",data);
}catch(error){
console.log("出错了",error)
}
};
start();
上述代码运行结果：
image.png
三、入门例子3--捕获异常
var sleep=function () {
return new Promise(function (reslove,reject) {
setTimeout(()=>{
console.log("我在中间执行")
reject("reject被执行啦。。。");
},4000)
})
};
var start= async function () {
try{
console.log("我最先执行");
let data=await sleep() ;
console.log("我最后执行，我得到的数据是：",data);
}catch(error){
console.log("出错了，错误原因是",error)
}
};
start();
image.png
四、入门例子--await必须在async声明的函数的上下文中
var sleep=function () {
return new Promise(function (reslove,reject) {
setTimeout(()=>{
console.log("我在中间执行")
reslove();
},3000)
})
};
var start= async function () {
try{
let ten=[1,2,3,4,5,6,7,8,9,10];
console.log("我最先执行");
for (let v of ten){
console.log(`当前是第${v}次等待..`);
await sleep(); //这里的上下文还是async
}
console.log("我最后执行");
}catch(error){
console.log("出错了，错误原因是",error)
}
};
start();
上述代码运行结果
image.png
因为
for (let v of ten) ｛
console.log(`当前是第${v}次等待..`);
await sleep();
｝
中的for (let v of ten) 上下文还在async函数中，如果将for (let v of ten)相关部分改成
ten.forEach(function (v) {
console.log("forEach 里的this",this);
console.log(`当前是第${v}次等待..`);
await sleep(); // 不是在async函数上下文中 而是在forEach 中了
});
这样就不行了，因为此时的await sleep(); 不是在async函数上下文中。
参考资料:
*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!
