首页 > 编程语言 >Promise, async, await实现异步编程,代码详解

Promise, async, await实现异步编程,代码详解

时间:2024-02-04 09:11:06浏览次数:38  
标签:异步 console 函数 await Promise async

写在开头

一点题外话

其实最近在不断的更新Java的知识,从基础到进阶,以及计算机基础、网络、WEB、数据库、数据结构、Linux、分布式等等内容,预期写成一个既可以学习提升又可以面试找工作的《Java成长之路》!算是对自己学习的总结(笔记),也算是一种程序猿的记忆,现在大环境那么差,万一哪天转行了,还能当做一种记忆。

以往的博客都是按照知识点的顺序发的,但今天一个大一的粉丝私信问JS异步编程内容,决定先理一理这块内容,想着后面如果还是有类似的咨询,则会破坏原有发文顺序,进行交叉更新,最后,会将所有内容汇总成PDF,发给需要的朋友哈。

回到话题

ok,那我们现在就一起来学习一下JS的异步编程吧,异步的诞生是因为同步带来的诸多不便,我们都知道JavaScript是单线程时间循环模型,同步如同流水线,一步步的往下走中间有步骤失败,下面的功能就无法进行,这显然不是我们想要的。我们想要的是,一个程序在执行的过程中,我们可以去干其他的,不需要等待它的完成再往下执行,这就是异步

异步编程

什么是异步编程?刚刚的大白话已经点名,为了能更直观的感受,我们看下面这段代码:
【代码示例1】

const i = 'HelloWord';
setTimeout(() => {
    console.log('JavaBuild')
}, 2000);
console.log(i)

我们上面说了JS是单线程的,在这个主线程中,我们通过setTimeout()这个回调函数,实现了异步。控制台运行的时候我们就会发现,HelloWord先打印,等2秒后打印JavaBuild。
这种通过简单的回调函数实现异步,在复杂的代码逻辑中,多个异步操作时会带来“回调地狱”,因此同样不常用。

Promise

为了优化(注意是优化,并不是彻底解决回调地狱)多层嵌套的异步调用,Promise(承诺)应运而生。
Promise 对象表示异步操作最终的完成(或失败)以及其结果值。

一个 Promise 是一个代理,它代表一个在创建 promise 时不一定已知的值。它允许你将处理程序与异步操作的最终成功值或失败原因关联起来。这使得异步方法可以像同步方法一样返回值:异步方法不会立即返回最终值,而是返回一个 promise,以便在将来的某个时间点提供该值

通过Promise我们可以实现相同的效果
【代码示例2】

new Promise((resolveOuter) => {
    resolveOuter(
        new Promise((resolveInner) => {
            setTimeout (() => {
                console.log("resolveInner");
            }, 1000 );

        }),
    );
    console.log('resolveOuter')
});

此 Promise 在创建时已经被解决(因为 resolveOuter 是同步调用的),但它是用另一个 Promise 解决的,因此在内部 Promise 兑现的 1 秒之后才会被兑现。

Promise的链式调用

Promise.prototype.then()、Promise.prototype.catch() 和 Promise.prototype.finally() 方法用于将进一步的操作与已敲定的 Promise 相关联。由于这些方法返回 Promise,因此它们可以被链式调用。
【代码示例3】

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("JavaBuild");
  }, 300);
});

myPromise
  .then(handleFulfilledA)
  .then(handleFulfilledB)
  .then(handleFulfilledC)
  .catch(handleRejectedAny);

关于Promise相关的详细内容这里不再赘述了,因为真实的使用中,我们一般也不会这样写,感兴趣的同学,可以看这篇文章一文看懂Promise

async / await

在ES8语法中带来了两个新词asyncawait,进一步的通过异步函数实现异步操作,并将Promise(期约)应用于JavaScript函数的结果。

async关键字用于声明异步函数,它可以在函数声明,函数表达式还有箭头函数上使用,使用async关键字可以让函数具有异步特征,在实际中它需要和await配合使用。
【代码示例4】

    async function msg(){}
    let jackson = async function(){}
    let jackson = async ()=>{}

一旦定义了一个函数作为一个异步函数,我们就可以使用 await 关键词。这个关键词放在回调的Promise之前,将会暂停执行函数,直到Promise执行或拒绝。
【代码示例5】

 async function msg(){
        let p = new Promise((resolve,reject)=>setTimeout(resolve,1000,'JavaBuild'));
        console.log(await p);
    }
 msg();

await关键字其实很简单,js运行在碰到await关键字时,会记录在哪里暂停执行。等到await右边的值可以使用了,就是处理完回调了,js会向消息列对中推送一个任务,这个任务会恢复异步函数的执行。这样的话,即使await后面跟着一个立即可用的值,函数的其余部分也会被异步求值。

【代码示例6】

    async function fun01(){
        console.log(await Promise.resolve('第一名'));
    }
    async function fun02(){
        console.log(await '第二名');
    }
    async function fun03(){
        console.log('第三名');
    }
    fun01();
    fun02();
    fun03();

大家猜一猜最终打印出来的结果顺序是啥?

//因为await原因,fun01,fun02进入暂停队列,fun03先执行,返回已解决(已敲定)的Promise后,进入fun01,执行返回后,在进入fun02。
第三名
第一名
第二名

ok,以上就是简单的JS异步编程啦!

结尾彩蛋

如果本篇博客对您有一定的帮助,大家记得留言+点赞+收藏呀。原创不易,转载请联系Build哥!

标签:异步,console,函数,await,Promise,async
From: https://www.cnblogs.com/JavaBuild/p/18005565

相关文章

  • 延迟Promise/单项目多npm版本/webpack好处/webpack5构建速度
    《Promise.withResolvers延迟Promise》https://sorrycc.com/promise-with-resolvers/promise当被reject之后,再次resolve,都是会返回reject的消息一个npm包的多个版本webpack好处需要通过模块化的方式来开发使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6......
  • async与defer的区别
    `async`和`defer`是两种不同的JavaScript特性,它们的主要区别在于它们的执行顺序和时间点。`async`意味着函数或代码块会被异步执行。当浏览器遇到带有`async`属性的资源时,它会立即开始下载该资源,同时继续加载页面。这样可以避免由于同步执行而导致的页面加载阻塞问题。......
  • 关于C# await的一点新理解
    关于await又理解深一点了,以前有点懵,原来await 是对Task.Run的一个修饰,叶节点,后续技节点是对标有async的方法进行串烧修饰,所以根在Task.Run这个方法要所以要理解await必须要详细查看Task.RunTask.Run是调用后直接把Run的参数委托丢线程池的然后不等待直接返回的,所以返回是一个Task......
  • net8 对接webapi接口通过 GetFromJsonAsAsyncEnumerable方法直接得到对象,无需进行反序
    调用API直接获取到对象现在有一个接口返回如下图中的数据:如果是在8以前的版本中获取该接口的数据,需要先获取到接口内容,然后进行反序列化,代码如下conststringRequestUri="http://localhost:5145/user";usingvarclient=newHttpClient();varstream=awaitclient......
  • C# AsyncLocal 是如何实现 Thread 间传值
    一:背景1.讲故事这个问题的由来是在.NET高级调试训练营第十期分享ThreadStatic底层玩法的时候,有朋友提出了AsyncLocal是如何实现的,虽然做了口头上的表述,但总还是会不具体,所以觉得有必要用文字+图表的方式来系统的说一下这个问题。二:AsyncLocal线程间传值1.线程间传值途径在C#编......
  • 用Promise解决并发
    前提假设有两个或多个网络请求函数如果使用asyn/await,假设一个请求需要2s,那么总共需要4s如果使用并发,则两秒即可完成两个请求constgetA=>(){returnPromise((resolve,reject)=>{setTimeout(()=>{reject('reject')},2000)})......
  • Python中为何使用新语法而不是装饰器来实现async/await异步功能
    Python是一种多范式编程语言,通过引入新的语法和特性,不断提升其功能和灵活性。在异步编程领域,Python引入了async/await关键字来实现协程和异步操作,而不是使用已有的装饰器语法。本文将探讨为何Python选择引入新语法来实现async/await异步功能,以及与装饰器的区别和优势。一、理解异步......
  • C# AsyncLocal 是如何实现 Thread 间传值
    一:背景1.讲故事这个问题的由来是在.NET高级调试训练营第十期分享ThreadStatic底层玩法的时候,有朋友提出了AsyncLocal是如何实现的,虽然做了口头上的表述,但总还是会不具体,所以觉得有必要用文字+图表的方式来系统的说一下这个问题。二:AsyncLocal线程间传值1.线程间传值途径在......
  • Promise相关
    Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。Promise是一个ECMAScript6提供的类,目的是更加优雅地书写复杂的异步任务。Promise是一个构造函数,通过......
  • spring boot @Async 使用的默认线程池
    线程池核心线程池满了进队列,队列满了创建新的线程.结论springboot从2.1开始@Async使用的是ThreadPoolTaskExecutor线程池,2.1之前使用的是SimpleAsyncTaskExecutor.ThreadPoolTaskExecutor此线程池的默认参数核心线程数:8队列容量:不限最大线程数:不限从默认配置......