1 阅读前, 需对promise和ES6(ECMA2015)有所了解,会更容易理解
2 代码如下,运行代码时把start1(),start2(),start3()注释去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>async</title>
</head>
<script type="text/javascript">

/**
async 表示这是一个async函数,await只能用在这个函数里面。

await 表示在这里等待promise返回结果了,再继续执行。

await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)
await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。
*/

//=======================================================
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve('ok'); //await等待可以得到返回值
}, time);
})
};

var start1 = async function () {    
console.log('start');
let result =await sleep(3000); //等待sleep执行完毕,才会继续执行
console.log(result);
console.log('end');
};

//start1();
ES7的Async/Await
 
//=======================================================

var ajax = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
    reject('ajaxCancel'); //async会产生异常,在catch中获取值
}, time);
})
};

var start2 = async function () {    
    try{
     console.log('loading.....');
     let result =await ajax(3000);
     console.log(result);
     console.log('ajaxEnd');
    }catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}
};

//start2();

ES7的Async/Await
 
//=======================================================
    
let datas = [1,2,3,4,5];
    
var receive = function (time,index) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
    resolve(index);
}, time);
})
};

var start3 = async function () {    
    try{
     console.log('receiving.....');
    
     for(var v of datas) {
     console.log(`当前是第${v}次等待..`);
     let result =await receive(1000,v);
     console.log("receiv"+result);
     }
    
     console.log('receiveEnd');
    
    }catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}
};

//start3();
ES7的Async/Await
 
//=======================================================

</script>
<body>
</body>
</html>

相关文章:

  • 2020-01-11
  • 2019-06-12
  • 2019-07-31
  • 2020-03-31
  • 2021-01-17
  • 2021-02-01
  • 2018-11-21
  • 2020-03-12
猜你喜欢
  • 2017-11-30
  • 2018-04-24
  • 2018-04-26
  • 2019-04-01
  • 2020-05-01
  • 2020-06-20
  • 2020-06-21
  • 2021-01-20
相关资源
相似解决方案