async的用法它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。废话不多说直接上代:
async function hello() { return 'hell0' } hello() console.log('11111')
但是控制台打印出来的却是 11111 没有 hello,首先一点我可可以知道,调用该异步函数,虽然没有执行,但是却没有影响到后面的代码的执行,所以说异步函数,是不会阻塞后面的代码的执行的,然后为了看到我们这个函数到底执行拿到了什么?可以打印下看一下: console.log( hello())
竟然返回的是一个Promise的对象,所以要想拿到Promise的值,我们可以用.then的方法.
async function hello() { return 'hell0' } hello().then(result=>{ console.log(result) }) console.log('11111')
查看控制台,这样我们就拿到了我们想要的值,所以呢我们可以知道,async 函数,总是会返回一个
Promise ,而这个Promise中有一个resolved, 这就是async的实现原理,所以我们想要拿到async异步函数的值,其实就是内部调用 Promise.solve(),把他作为promsie传递出来.
.
也许你会为伴随着async的还有一个await的吗.下面看这行代码:
async function f() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("hello!"), 1000); }); let result = await promise; console.log(result) } f();复制代码
当我们执行fn()函数的时候,明显看到有延迟,resolve的值最终成了result,首先我们可以看到await关键字是放到了async的后面,哪能放到前面吗,明确告诉你不可以,这两个的关键字的关系是,有async可以有await,但是有await一定有async, 而且我们看到await后面可以放表达式,不过一般我们放的都是promise,为了再次演示我们还可以看下面的代码:
function sayHello (saySomething) { return new Promise((resolve,reject)=>{ resolve('说'+saySomething) },1000) } async function toSay(){ let result = await sayHello("hello") console.log(result) } toSay() 控制台 -->说hello复制代码
由上面所说的可以总结几点, asyncy异步函数使函数总是返回一个promise 在这个异步函数中可以使用await ,用来等待promise处理完比,所以通过saync/await 我们可以很少需要写promise,then/catch,同时他也是解决回调地狱的好方法,请看下面代码:
function async_add(m,n,callback){ return new Promise (function (resolve,reject){ setTimeout(()=>{ resolve(callback.call(null,m+n)) },500) }) } async function addFn(){ let res1=await async_add(1,2,function(num){ console.log(num); return num; }) let res2 = await async_add(res1, 3, function(num) { console.log(num); return num }) let res3 = await async_add(res2, 5, num => { console.log(num); return num; }) let res4 = await async_add(res3, 10, num => { console.log(num); return num; }) } addFn() 最后一次会输出 3 6 11 21复制代码
最后提一点的就是如果当我们使用async异步函数,报错的时候,我们应该如何那拿到错误的信息呢,所以这就要用到了 try catch了,请看下面代码
function sleep(second) { return new Promise((resolve, reject) => { setTimeout(() => { reject('want to sleep~'); }, second); })}async function errorDemoSuper() { try { let result = await sleep(1000); console.log(result); } catch (err) { console.log(err); }}errorDemo()复制代码
以上就是个人总结,谢谢大家!