async、await、Promise

最新推荐文章于 2025-02-07 16:27:23 发布

原创最新推荐文章于 2025-02-07 16:27:23 发布 · 459 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #java

前端开发同时被 3 个专栏收录

6 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

4 篇文章

订阅专栏

本文深入解析了JavaScript中的异步编程概念，包括async函数、await关键字和Promise对象的使用。通过示例展示了如何通过async/await处理异步操作，以及为何在then函数中无法直接使用await。同时，强调了await关键字只能在async函数内部使用，以及如何通过await将Promise结果转化为普通值。最后，讨论了在实际开发中处理Promise返回值的挑战和解决方案。

async、await、Promise

async就是将一个函数声名为异步函数，await等待异步函数返回的结果，Promise是用来封装异步函数返回的结果

1.async

举个例子

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

输出结果为：

可以清楚的看到，即使timeout()函数先调用，但是结果输出是在后面，从这可以看出，timeout()函数没有阻塞后面代码的执行，也就是说async关键字可以将函数声名为异步函数，异步函数不会阻塞后面代码的执行（有一点需要注意，async声名的函数的返回值都为Promise对象，想要拿到该对象封装的值，就要使用then()来取，就像上面那样）。

2.await

如果一个函数被声名为异步函数，那么它什么时候会返回值，我们是不确定的，当我们需要拿到一个异步函数的返回值才能进行下一步的代码书写时就可以使用await关键字了，需要注意的时await关键字只能用在async声名的异步函数内部

async function test() {
    await timeout()；
    dosomething()；
}

这样就可以保证在拿到timeout()返回值的时候，才会执行dosomething()函数，不然dosomething()就一直会被阻塞，直到timeout()执行完成，返回相应的结果

3.Promise

值得注意的是，实际开发中如果返回值为Promise对象，很难对返回结果进行进一步的处理。

//这个是ts的语法，如果是js就不用带后面那个any
let res:any=await timeout();

如果这样异步函数返回的对象就变成了普通对象，就可以对返回值做处理了

4.then函数中不能使用await

问题描述：

开发中经常会使用then函数来处理异步函数的结果，但是这里面不能使用await关键字；

解决办法：

将then函数中的函数前面加上async关键子（注意：then函数的参数是一个函数）

如图所示
在这里插入图片描述
注意：
如果使用async来声明一个函数为异步函数，那么该函数的返回值一定是promise类型的，如果想要将这个类型变成普通类型，就要使用await关键字，这样该异步函数的返回值就会变成普通类型