async 和Generator基本用法和概念介绍。

it2026-08-08  7

基本概念

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

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

3、await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…)

这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。

普通函数

var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, time); }) }; var start = function () { // 在这里使用起来就像同步代码那样直观 console.log('开始');//开始 sleep(3000); console.log('结束');//结束 }; start();

控制台先后打印顺序 先打印开始然后打印结束

async函数

async函数是Generator函数的语法糖,将Generator的星号换成async将yield换成await,async函数比Generator函数更好用 1、自带执行器,执行起来,跟调用普通函数一样 2、async和await 语义更清晰,async表示函数里有异步操作,await 表示紧跟在后面的表达式需要等待结果 3、await后面啥都可以跟,可以是Promise 也可以是对象和原始类型的值(数值、字符串和布尔值,但这时等同于同步操作

点击查看Generator介绍及用法

var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // resolve("成功"); reject("失败") }, time); }) }; var start = async function () { for (var i = 1; i <= 10; i++) { console.log(`当前是第${i}次等待..`); await sleep(1000) .then((ok)=>{ console.log(ok)//成功 }) .catch((err)=>{ console.log(err) }) console.log(`第${i}此循环完毕`) } }; start()

控制台执行顺序如下图 可以看出来,每次打印都会停1000毫秒然后再继续执行,有点类似于Generator函数。

捕捉错误

用try catch语法捕捉错误也可以捕捉到,用.then()和.catch()也可以,上面async函数函数中用到了.then()和.catch(),下面展示一下用try catch捕捉错误的代码。

var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { // 模拟出错了,返回 ‘error’ resolve("成功") // reject('error'); }, time); }) }; var start = async function () { try { console.log('start'); await sleep(3000); console.log('end'); } catch (err) { console.log(err); } }; start()

上述代码控制台先会打印async间隔三秒打印end 如果将上面地的 resolve("成功")换成reject('error');则会先打印async间隔三秒打印err

最新回复(0)