同步和异步、Promise、async和await

最新推荐文章于 2025-06-22 16:47:49 发布

雪碧聊技术

最新推荐文章于 2025-06-22 16:47:49 发布

阅读量1.3k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：前端 javascript 开发语言同步/异步 Promise类 async和await 回调地狱

本文链接：https://blog.csdn.net/qq_63981644/article/details/144363127

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

4、同步/异步的区别：下面的代码需要 / 不需要等待上面的代码执行完毕。

3、为什么要是用Promise？因为Promise解决了“回调地狱”问题

③await意思是“等待”，用来修饰Promise对象，从而获取Promise对象的任务执行结果。

④await必须要放在async修饰的函数中使用。

举例：

结语

一、同步和异步

1、什么是同步？

同步这个词，起得不是很好，容易让人产生歧义。

准确来说，应该叫“按照顺序”。

即：上面的代码执行完毕，才会执行下面的代码。

2、什么是异步？

异步就是各做各的，互不干扰、不会互相等待。

注意：异步不代表乱序。

JavaScript里面有很多这样的异步函数，比如settimeout函数、fetch函数。

3、举例：

如图，如果func( )这个函数，没加上async关键字修饰的话，那么就是一个同步方法，此时就会先将func( )函数彻底执行完毕，才会触发console.log语句；

如果将func()函数加上，那么代表该函数是一个异步函数，此时不用等待func()函数彻底执行完毕，就能触发console.log语句。

4、同步/异步的区别：下面的代码需要 / 不需要等待上面的代码执行完毕。

二、Promise

1、什么是Promise？

Promise的中文意思是“承诺”，在JavaScript里面，可以通俗地理解为：把这个任务交给我吧，我来完成。

2、Promise是如何使用的？

首先Promise是一个类，将其实例化后会生成一个对象。

我们需要给Promise的对象传入一个函数当做形参，而这个形参函数又需要两个形参函数来保存成功/失败的结果。

举例1：

<script>
    /*
    此时有一个任务需要我们完成：如果变量num的值是1，则我们应该收到一个数组[1, 2, 3]
    如果变量num的值是2，则我们应该收到一个字符串“hehe error!”。
    */
    

    const num = 1
    //1、定义Promise对象p1，用来处理上述那个任务
    const p1 = new Promise(function haha(tmp1,tmp2){
        if(num == 1){
            tmp1([1,2,3]) //第一个形参函数tmp1用来存放成功结果
        }else{
            tmp2("hehe error!")//第二个形参函数tmp2用来存放失败结果
        }
    });

    //2、使用p1对象,获取任务的执行结果
    p1
    .then(function f123(params){//then用来获取成功结果
        console.log(params)
    })
    .catch(function f123(params){//catch用来获取失败结果
        console.log(params)
    })
</script>

运行结果：

3、为什么要是用Promise？因为Promise解决了“回调地狱”问题

①什么是回调地狱问题？

简单来说，就是异步函数嵌套异步函数，并且嵌套了很多层，导致我们看着很费眼，可读性很差。

举例：

//三秒后，输出demo 333；
//两秒后，输出demo 222；
//一秒后，输出demo 111；
setTimeout(function(){
    console.log('dedmo 333')
    setTimeout(function(){
        console.log('demo 222')
        setTimeout(function(){
            console.log('demo 111')
        },1000)
    },2000)
},3000)

运行结果：

此时setTimeout就是异步函数，并且嵌套了3层，不好看，可读性很差，因此我们必须使用Promise来解决这个缺点

②使用Promise解决上述问题

//使用Promise改写

//1、创建Promise对象p1，并完成输出demo 333的任务
const p1 = new Promise(function haha(tmp1,tmp2){
    setTimeout(function(){
        tmp1('demo 333')
    },3000);
});

//2、获取p1执行完任务的结果
const p2 = p1.then(function f123(tmp){
    console.log(tmp)
    //3、创建Promise对象p2
    const p2 = new Promise(function haha(tmp1,tmp2){
        setTimeout(function(){
            tmp1('demo 222')
        },2000);
    });
    return p2
})

//4、获取p2执行完任务的结果
p2.then(function f123(tmp){
    console.log(tmp)
})

//以此类推...demo 111的输出任务也是这么写。

运行结果：

由此可见，虽然Promise解决上述问题时，代码量变多，但是看起来会更加清晰、有条理。

三、async和await

1、为什么要是用async和await？

学完上面的内容，我们已经可以使用Promise来解决回调地狱问题。

但是明眼人都看得出来，你那个Promise的代码量太多了，而且看起来也不是特别地简洁。

因此，async和await就应运而生。

注意：async和await是用来辅助Promise的，而不是取代。

2、async和await是什么？

①async和await必须配套使用。

②async是一个关键字，用来修饰函数

③await意思是“等待”，用来修饰Promise对象，从而获取Promise对象的任务执行结果。

④await必须要放在async修饰的函数中使用。

举例：

//使用async和await来辅助Promise
async function func2(){
    //1、创建Promise对象p1，执行一个任务
    const p1 = new Promise(function haha(tmp1,tmp2){
        setTimeout(function(){
            tmp1('demo 333')
        },3000)
    });
    //2、获取p1执行的结果
    let str = await p1;
    console.log(str)

    //3、创建Promise对象p2，执行一个任务
    const p2 = new Promise(function haha(tmp1,tmp2){
        setTimeout(function(){
            tmp1('demo 222')
        },2000)
    });
    //获取p2执行的结果
    str = await p2
    console.log(str)
}

//调用上述async修饰的函数func2()
func2();

console.log('test Demo')//测试异步效果

运行效果：