JS之同步异步promise、async、await

最新推荐文章于 2024-09-22 18:46:53 发布
最新推荐文章于 2024-09-22 18:46:53 发布
阅读量1.3k 收藏 8
点赞数 2
分类专栏： 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50985215/article/details/133800566
版权

promise异步操作

Promise是异步编程的一种解决方案

JavaScript异步与同步解析

学习promise前我们先来了解下什么是异步？

基本概念：

  • 消息队列中的任务分为宏任务与微任务;
  • 调用栈也可以称为主线程

首先我们要知道js是单线程语言，也就是说，它并不能像JAVA语言那样，多个线程并发执行。

单线程：

  • JavaScript就是一个单线程的语言
  • 为什么js是单线程？如果一个线程在一个节点中添加内容，另一个线程要删除这个节点。所以为了不必要的麻烦，js就是一门单线程语言。

先讲下什么是同步。同步指的是代码一行一行依次执行，下面的代码必须等待上面代码的执行完成。当遇到一些耗时比较长的任务时，比如网络请求就容易发生阻塞，必须等数据请求过来后才能执行后面的操作。

image-20231012091327982

那么这里异步执行是在请求数据的同时还能执行后面的任务。异步是非阻塞的，异步逻辑与主逻辑相互独立，主逻辑不需要等待异步逻辑完成，而是可以立刻继续下去

image-20231012091440179

JS的异步执行分析：

  • 拿现实生活来举例，比如一个人在家（将一个人比作单线程），你既要煮饭又要炒菜。
  • 这里我们把煮饭算作一个异步的任务，因为煮饭是一个比较耗时的任务（一般像比较耗时或不确定执行时间的任务，比如定时器，网络请求，事件执行 都是异步执行），其次你没炒完菜是不会去吃饭的（也就是主线程任务没有完成，是不会执行异步任务的）。
  • 那么你可以怎么做呢？你可以把煮饭的任务交给电饭煲处理。
  • 先把米放入电饭煲交给了电饭煲处理，再去炒菜，炒完菜再去把煮好的饭取出来。
  • 将饭交给电饭煲处理相当于开启了一个异步的任务，电饭煲就是处理这个异步任务的模块。饭煮好了会自动跳转，这就相当于异步任务被对应的模块解析好了会自动放入消息队列，等待事件循环调入主线程执行（前提是主线程任务全部执行完毕）。
  • 主线程任务执行完成，会通过不断的循环消息队列，来执行其中的任务。
  • 也就是你把炒菜完了，你就会不断的观察饭是否跳转（也就是循环消息队列看是否有任务），如果有就把饭装到碗里开始吃饭，此时任务就全部完成。
  • 但是干活的始终还是一个人，这就是单线程的异步执行过程。
    20210610125743317
console.log("遇到煮饭任务，将饭放入电饭煲");
//使用setTimeout模拟煮饭
setTimeout(()=>{
	console.log("饭已经煮熟，等待饭被取出");
},0);
console.log("开始炒菜任务");
  • 你以为的执行顺序：“遇到煮饭任务，将饭放入电饭煲 ” -> “饭已经煮熟，等待饭被取出 -> ”开始炒菜任务“
  • 但是你想想这样符合逻辑吗，你会等饭熟练才开始炒菜吗？
  • 最终执行顺序：“遇到煮饭任务，将饭放入电饭煲 ” -> “开始炒菜任务” -> “饭已经煮熟，等待饭被取出”
  • 显然js都知道你认为的执行顺序是不符合逻辑的。这里setTimeout就是一个异步任务，其中的箭头函数就是异步完成后回调的函数。

解释疑惑：
JavaScript既然是单线程语言，那么为什么同时可以执行多个任务（同时煮饭炒菜）？

  • 你可能会想这不是废话吗，煮饭交给电饭煲了啊。

  • 确实没错，煮饭任务交给电饭煲了，那么在JS中是谁去处理这些异步的任务呢？

    • 前面异步任务分析有说到，异步任务会被对应模块解析（饭被电饭煲模块解析）。

    • 那么这就和宿主有关系了，js一般都是运行在游览器上（当然有node.js），也就是寄生在游览器上，那么宿主就是游览器。所以是宿主提供的模块去处理这些异步任务，使得JS可以实现与其他语言类似的多线程操作。

补充异步任务执行顺序：

  • 而常见的promise，async，await 执行放入的是微任务队列中，主线程的代码执行完后，会优先循环微任务队列的代码，再是宏任务队列。
  • 主线程 > 微任务 > 宏任务
  • 注意！！宏任务队列与微任务队列的任务都是谁先进入队列谁先执行。

网络异步请求

<!DOCTYPE html>
<html>

<head>

</head>

<body>


</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    console.log(1)
    $.ajax({
        type: "post",
        url: "https://tenapi.cn/v2/yiyan",
        success: function (response) {
            console.log(response)
        }
    });
    console.log(2)
</script>

</html>

image-20231012183016051

异步任务的影响

所以从上可以看出异步的执行是依赖于回调函数，那么在进行异步操作时回调函数会带来什么影响呢？那就是回调地狱。

回调地狱指的是：回调函数嵌套回调函数，形成的多层嵌套。

例子：查询三次网络请求，请求成功一次才会发起下一个请求

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $.ajax({
        type: "post",
        url: "https://tenapi.cn/v2/yiyan",
        success(data) {
            console.log("第一次成功查询信息：", data);
            $.ajax({
                type: "post",
                url: "https://tenapi.cn/v2/yiyan",
                success(data) {
                    console.log("第二次成功查询信息", data);
                    $.ajax({
                        type: "post",
                        url: "https://tenapi.cn/v2/yiyan",
                        success(data) {
                            console.log("第三次成功查询信息", data);
                        },
                        error(error) {
                            console.log("第三次成功信息出现异常了：" + error);
                        }
                    });
                },
                error(error) {
                    console.log("第二次成功信息出现异常了：" + error);
                }
            });
        },
        error(error) {
            console.log("第一次成功信息出现异常了：" + error);
        }
    });

</script>

image-20231012185118570

Promise的用法

异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大

实例化Promise对象

var promise = new Promise(传一个函数);
var promise = new Promise(function (resolve, reject) {
   if (/* 异步操作成功 */) {
      resolve(value);
    } else {
      reject(error);
    }
});
  • shi

三个状态

有三个状态：

  • pending [待定] 初始状态
  • fulfilled [实现] 操作成功
  • rejected [拒绝] 操作失败
var promise = new Promise(function (resolve, reject) {
        if (false) {
            resolve('success');
        } else {
            reject('fail');
        }
    });
    promise.then(res => {
        console.log(res) // 成功 resolve('success')
    }).catch(err => {
        console.log(err) // 失败 reject('fail');
    });

image-20231012190329560

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤

状态改变，只有两种可能：

  • 从pending变为fulfilled
  • 从pending变为rejected

相关API

Promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值

<script>
     //Promise.all 
     let p1 = new Promise((resolve, reject) => {
        resolve('成功了')
     })
     let p2 = new Promise((resolve, reject) => {
        resolve('success')
     })
     let p3 = Promise.reject('失败')
     Promise.all([p1, p2]).then((result) => {
        console.log(result) //['成功了', 'success']
     }).catch((error) => {
        console.log(error)
     })
     Promise.all([p1, p3, p2]).then((result) => {
        console.log(result)
     }).catch((error) => {
        console.log(error) // 失败了，打出 '失败'
     })
</script>

image-20231012202520115

Promise.race

顾名思义， Promse.race就是赛跑的意思，意思就是说， Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态

<script>
   let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success')
        }, 1000)
    })
    let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('failed')
        }, 500)
    })
    Promise.race([p1, p2]).then((result) => {
        console.log(result)
    }).catch((error) => {
        console.log(error) // 打开的是 'failed'
    })
</script>

image-20231012202807074

使用Promise解决回调地狱

如上代码就是产生了回调地狱，当代码过多会非常复杂。如下就是使用一种优雅的方式（promise）来解决如上的问题

  • 解决刚刚那个发送三次请求案例
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    //使用Promise解决回调地狱
    function post(url,n) { //自己定义一个方法整合一下
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                success: function (data) {
                    resolve(data);
                },
                error: function (err) {
                    reject(`第${n}次调用失败`+err)
                }
            })
        });
    }
    post("https://tenapi.cn/v2/yiyan",1)
        .then((data) => {
            console.log("第一次成功查询信息：", data)
            return post("https://tenapi.cn/v2/yiyan",2);
        })
        .then((data) => {
            console.log("第二次成功查询信息：", data)
            return post("https://tenapi.cn/v2/yiyan",3);
        })
        .then((data) => {
            console.log("第三次成功查询信息", data)
        })
        .catch((err) => { //失败的话catch
            console.log( err)
        });
</script>
  • 这样代码就显的非常清楚，不想之前那样非常难懂

image-20231012205206442

总结

Promis就是对异步操作进行封装，其中的思想就是不希望你在回调函数中处理需要执行的代码，而是把回调执行的代码放入对应的区域也就是then()或catch()方法中处理，然后通过resolve()或reject()来调用。将代码分离后做的时链式的调用，你可以这样理解一个then或一个catch就是一个链条的连接点。一般有异步操作我们都要使用promise对异步操作进行封装，养成良好的习惯。

JS的同步执行解析：

  • 代码由上至下依次执行。前面任务在执行，后面代码必须排队等待。
  • 就如上面的例子如果不做异步处理，让任务同步执行就会一直卡在做饭的地方，等饭煮好了才能去炒菜。

Async / await

也是用来处理异步的，其实是Generator 函数的改进，背后原理就是promise

Async

<script>
async function f1() {
    return "abc";
   
}
console.log(f1())
</script>

image-20231012214027122

// async
async function f1() {
    return "abc";
    // 自动包装成promise对象
    // 与下面两种等价
    // return Promise.resolve('abc');
    // return new Promise((resolve) => { resolve('abc') });
}
f1().then((data)=>{
   console.log("执行了异步",data)
})

image-20231012214200026

await

function f4() {
   setTimeout(() => {
     console.log("222")
   }, 3000)
   console.log("333")
}
function f5() {
   console.log("111")
   f4(); 
   console.log("444")
}
f5()

image-20231012214539743

async function f4() {
     await new Promise(function (resolve, reject) {
         setTimeout(() => {
           resolve()
         }, 3000)
     }).then((data)=>{
         console.log("222")
     })
     console.log("333")
}
function f5() {
     console.log("111")
     f4();
     console.log("444")
}
f5()

image-20231012221139473

async function f4() {
    await new Promise(function (resolve, reject) {
        setTimeout(() => {
           resolve()
        }, 3000)
    }).then((data)=>{
       console.log("222")
    })
    console.log("333")
}
async function f5() {
    console.log("111")
    await f4();
    console.log("444")
}
f5()

image-20231012221246600

异常处理

async function f3() {
   return Promise.reject('sss');
   // return Promise.resolve('abc')
}
async function f5() {
   try {
     var c = await f3().then((data)=>{ console.log(data)});
   } catch (e) {
     console.log(e)
   }
   //如果await 是reject，后面代码就不会执行，要加上try catch才会执行
}
f5()

image-20231012221614568

库里不会投三分
关注
专栏目录
JS中的异步async-await（秒懂异步编程模式）
百赢出品，必属精品
04-09 1924
异步编程是一种编程模式，用于处理程序中需要长时间等待的操作，比如网络请求、文件读写、定时器等。在传统的同步编程模式下，程序会按照顺序一步步执行，如果遇到需要耗时的操作，程序会阻塞等待操作完成，直到操作完成后才能继续执行后续代码。异步编程模式是一种用于处理异步操作的编程范例，其核心目标是提高程序的效率和性能，同时保持代码简洁易读。回调函数最基本的异步编程模式，通过将函数作为参数传递给异步操作，在操作完成时调用该函数。容易导致回调地狱（Callback Hell），难以维护和理解，因为嵌套层级很深。
js中的promise、async/await 用法，详解async、await 语法糖，js中的宏任务和微任务（保姆级教程二）
zhangfuping123456789的博客
08-16 2209
js、promise、await、async
JavaScript同步与异步
m0_63669414的博客
02-19 299
当满足相应异步任务的条件时事件触发线程就会在回调队列中加入相应的回调函数，当主线程的代码执行完后（执行栈空了）就会去回调队列读取任务，执行相应的回调函数。比如定时器的时间是1s，主线程的代码执行时间长于1s，JS引擎会等主线程代码执行完之后才调用定时器，定时器并不会在1s后就执行回调函数。事件循环说明：在主线程的代码执行完之前回调函数的代码是不会被执行的，因此像定时器这样的回调函数可能会有延迟。注意：alert（）函数会暂停当前主线程的执行，同时暂停定时器的计时。
JS执行机制(同步和异步)
最新发布
2301_76662406的博客
09-22 943
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。异步:在做这件事的同时，你还可以去处理其他事他们的本质区别：这条流水线上各个流程的执行顺序不同。
理解 JavaScript 的 async/await
weixin_34377919的博客
11-19 391
随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP 系统...
JS中的同步异步
weixin_43803086的博客
08-05 132
1.同步和异步，无论如何，做事情的时候都是只有一条流水线（单线程），同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。 2.异步操作：可以改变程序正常执行顺序的操作就可以看成是异步操作 3.同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务 4.异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。 ...
JS 同步异步
qq_37365686的博客
12-17 204
JS　同步异步
js同步异步
王宏涛的博客
02-28 338
js同步异步，异步任务有哪些呢，什么是同步异步
JS 异步编程与Promise async await语法糖
01-20
JavaScript中的异步编程是...总结来说，JavaScript的异步编程通过Promise和事件循环机制，以及更易读的`async/await`语法糖，实现了对非同步操作的高效管理。理解这些概念对于编写高性能的前端和Node.js应用至关重要。
异步Promise及Async/Await详解
qq_15859173的博客
12-21 775
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
async/await与promise（nodejs中的异步操作问题）
10-20
综上所述，`async/await`配合Promise为Node.js中的异步操作提供了一种清晰且有效的方法。它不仅避免了回调地狱，还使得异步代码更易于理解和维护，大大提升了开发者的编程体验。随着JavaScript和Node.js的发展，这些...
ES6中的Promise、async、await，超详细讲解！
共同学习，共同成长
08-06 1939
Promise是es6引入的异步编程新解决方案，Promise实例和原型上有reject、resolve、all、then、catch、finally等多个方法，语法上promise就是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果，本篇文章主要介绍了ES6中的Promise对象与async和await方法
js同步、异步
qq_42815580的博客
06-27 153
同步异步
JS的同步、异步
weixin_45072479的博客
10-24 496
JS中的同步、异步 1.标签的异步 1、图片标签加载是异步的; 加载a.js做了异步,等待加载完成后再去执行,而在加载的同时,继续向下执行加载b标签,并且执行b标签; 2.只有defer，仍然是同步,上面的内容加载完成后执行,async和defer一起使用时,当前页面所有元素创建并且加载完成后执行; a.创建html标签; b.创建head,并且使用link加载css样式（异步）,加载scrip...
js 同步与异步
Tianxiaoxixi的博客
04-17 4103
js 同步与异步
js-同步与异步
前端小白
02-20 341
js同步与异步 单线程
js的同步和异步
tang7837010的专栏
12-25 4688
1.参考文章： http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
js 同步和异步
Br不二
03-06 835
`JavaScript`中的同步和异步指的是代码执行的方式，其中同步是指代码按照顺序逐行执行，每行代码执行完毕之后才会继续执行下一行代码。而异步则是指代码执行时不会阻塞后续代码的执行，异步代码会在后台执行，当它们完成执行后会通过`回调函数`或`Promise`返回结果。
JS的同步与异步
热门推荐
qq_51649346的博客
04-04 2万+
js的同步与异步 ​ 众所周知，js是一个单线程的语言，学过java、c之类的都知道，其他语言有个叫类继承的东西，就相当于开辟另个一个流水线，是多线程 ​ 而javascript就像一条流水线，它无法开辟别的流水线，是一个单线程，也就是说js要么加工，要么包装，不能同时进行多个任务和流程 同步与异步 什么是同步，什么是异步 ​ 举个例子，我一边吃饭一边看剧，这是同步还是异步？有人说我同时在做2件事情，那肯定是异步了，但这其实是同步。 ​ 以js来说，同步就是在浏览器执行js代码的时候，将所有同步（也就是大部
promise async await区别
06-06
Promise、async/await 都是 JavaScript 中处理异步编程的方式，它们的区别如下： 1. Promise 是 ES6 中引入的一种异步编程的方式，它可以解决回调地狱的问题。Promise 对象可以有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。使用 Promise 的 then 方法可以在 Promise 对象状态变为 fulfilled 时执行回调函数，使用 catch 方法可以在 Promise 对象状态变为 rejected 时执行回调函数。 2. async/await 是在 ES7 中引入的异步编程方式，它基于 Promise 实现，使用 async/await 可以让异步代码看起来像同步代码。async/await 关键字可以让异步代码更加简洁易读，并且可以通过 try/catch 处理异常。 总的来说，Promise 更加底层，而 async/await 更加高级一些。如果项目中需要兼容 ES5，则只能使用 Promise，如果使用了 ES6 或更高的版本，则建议优先使用 async/await。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

库里不会投三分

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值