【JavaScript教程】#15 轻松入门 JavaScript Async Await | Async Await 比 Promise 更好用?让你快速掌握 async await 异步执行概念

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 142

  • @bokeyman
    @bokeyman 3 года назад +9

    callback & Promise & async/await 這三篇說明的非常清楚
    對於需要扎基本功的,非常受用
    感謝您的講解

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      不客气,加油!

    • @chezyue8923
      @chezyue8923 3 года назад

      我也是按照順序看這三部,確實講解得超好

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@chezyue8923 谢谢 谢谢,多来学习吧~~ :)

    • @yaqingliu-q4x
      @yaqingliu-q4x 12 дней назад

      @@wenxuandecode4140 还有吗? 课程完全结束了吗?

  • @whatsuphaha6289
    @whatsuphaha6289 Год назад

    超級感謝~你的影片讓我完全了解這個別的平台看了一整天還搞不懂的概念,你簡單的解釋範例讓我能套用到更深入的程序中!真的謝謝你,期待能從你這裡學到更多!

  • @emilyli1608
    @emilyli1608 3 года назад +1

    非常感謝,十分清晰,終於搞懂了async/await和promise是怎麼回事,網上的資料大多是專業術語,看到頭痛都沒看懂,反正十分感謝

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      不客气,真高兴能帮助你解决这方面的困扰,加油哦💪💪💪

  • @Steven-oe4hv
    @Steven-oe4hv 3 года назад +3

    谢谢,讲得很好,条理清晰。
    说到本质上,async/await 基本是 Promise 的语法糖。

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      谢谢你的留言,你是刚开始学习JavaScript?

    • @Steven-oe4hv
      @Steven-oe4hv 3 года назад

      @@wenxuandecode4140 有几年了,不过平时用的不太深

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@Steven-oe4hv 现在是从事软件开发吗?

    • @Steven-oe4hv
      @Steven-oe4hv 3 года назад

      @@wenxuandecode4140 是的,做前端开发

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      嗯,都还几年了,功底应该可以的。还是你之前只是负责设计?

  • @エド-i5f
    @エド-i5f 2 года назад

    感謝,剛剛好案件需要用到。
    非常淺顯易懂,感謝您。

  • @jermen2
    @jermen2 2 года назад

    這影片質量很高,直接subscribed

  • @minik520
    @minik520 4 года назад +9

    老師教的很仔細
    碩士讀的是文組,最近剛畢業在找工作
    想轉職理工,很喜歡你的視頻
    讓我燃起了希望😭

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад

      哈哈,谢谢!是啊,身怀其他领域的绝技也能为你加分!之前接触过编程吗?

    • @minik520
      @minik520 4 года назад

      WenXuanDecode文轩解码 很久之前有修過一門程式設計(C#) 不過是很基礎那種 簡單的迴圈概念而已

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад

      @@minik520 那也还可以啊,至少学过。希望以后你也能在这行闯出一片天

  • @bradleyli1569
    @bradleyli1569 Год назад

    非常感谢你的影片!希望您以后可以继续推出更多的优质编程学习影片同时希望有更多的同学能够订阅您的频道!

  • @angelac2481
    @angelac2481 2 года назад

    感谢老师 这绝对是我看过的最清楚的async await 讲解了

  • @wenwan2487
    @wenwan2487 3 года назад

    最近学校做项目要用javascrpt向数据库发送请求获取数据,对于从来没接触的我来说真是看了别人的代码都没不知道是什么,还好我们老师耐心,花一个多小时安慰我,还给我讲解如何查找信息,然后找到文轩解码,虽然我还不能理解项目的代码,但我基本搞明白是怎么回事了。我学习编程的诀窍是重点新知识至少要看三遍,第一遍之后自己做总结,第二遍巩固,第三++遍改善+拓展。这个视频我还得看几遍

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      谢谢你的关注。编程是一门循序渐进的技术活儿,必须要有耐心。有时间去Codetisan自学编程社区玩玩吧,和其他小伙伴一起互动,一起学习,效果会更好 😀

  • @葉育承-y1y
    @葉育承-y1y 3 года назад

    感謝教程,相當的仔細,解決疑惑

  • @AndysTV
    @AndysTV 2 года назад

    1:37 reasultA resultB 是不是可以用 const 宣告?

  • @Bobeenliu
    @Bobeenliu 2 года назад

    感谢 讲解的真的很好

    • @wenxuandecode4140
      @wenxuandecode4140  2 года назад

      不客气,加油!有时间去Codetisan自学编程社区互相交流吧~

  • @小羊羊-y4h
    @小羊羊-y4h 3 года назад +1

    超清楚~~謝謝文軒

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      谢谢你用心学习,有时间可以再翻看其他的教学视频,加油!

  • @Yueyelongbob
    @Yueyelongbob 3 года назад +2

    希望之后可以讲解RegExp😙

  • @1231234567100
    @1231234567100 11 месяцев назад

    謝謝你!!

  • @mindmeditative1201
    @mindmeditative1201 3 года назад

    非常感谢!期待更新。

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      不客气,可以去看看nodejs和sql数据库的教学 😀

  • @cheungyz27
    @cheungyz27 3 года назад

    太清晰了。厉害。谢谢

  • @DongEyoung
    @DongEyoung 2 месяца назад

    牛🤠

  • @cocosisiyaya
    @cocosisiyaya 3 года назад

    thank you so much, it is clear and nice.

  • @ethanyang961
    @ethanyang961 Год назад

    太感谢啦!

  • @shenzhenhua875
    @shenzhenhua875 2 года назад

    终于有点明白callback,promise,async await的关系了

  • @aaazyma5546
    @aaazyma5546 3 года назад

    老师 请问有时间的话可以出一个讲 这几个标签的教学嘛

  • @plaidor
    @plaidor 4 года назад

    视频做的很用心!我这种小白都能听懂呢

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад

      谢谢你的支持!有时间可以翻看JavaScript教学系列里的视频。有问题随时提问 :)

  • @aitilang
    @aitilang 2 года назад

    一年过去了啊
    有继续更新吗?

  • @johnnyhuang3773
    @johnnyhuang3773 3 года назад

    文軒老師您好
    看了老師後續幾集的教學影片,請問有關function用法都是用在哪些用途呢??
    看過其他bootstrape的程式碼裡也有function,可是接著不是then 而是以this,
    還是要看function用在哪些用途,而用法會隨著改變嗎?謝謝老師

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      Function一般是把某个特定的功能汇集起来,然后被统一调用,比如注册function, 生成订单function。每个function有明确的分工,代码只需要写一遍,就能在其他地方统一调用,避免在不同的文件出现不同版本的用户注册代码

    • @johnnyhuang3773
      @johnnyhuang3773 3 года назад

      @@wenxuandecode4140 文軒老師您好,不好意思,這幾天再忙一直未回覆老師訊息,老師的講解很明白讓我懂了,謝謝老師~

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      @@johnnyhuang3773 不客气,加油!

  • @raweo6618
    @raweo6618 3 года назад

    有空能不能讲一下react啊?

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      你想听?你现在学到什么程度了?

    • @raweo6618
      @raweo6618 3 года назад

      @@wenxuandecode4140 初级阶段噢

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@raweo6618 哦,建议你先掌握基本的html/css/javascript,然后才开始进入react。不然你会一头雾水,react我个人觉得非常复杂 :)

    • @abulalalalalaabulala4521
      @abulalalalalaabulala4521 3 года назад

      @@wenxuandecode4140 我已经掌握了,现在能使用react js写一个todolist, 可是现在我发现到我没完全理解this

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@abulalalalalaabulala4521 原来是这样。其实ReactJS在新版本也不太需要用this,以后ReactJS会逐渐淘汰Class Component,取而代之的是Functional Component :)

  • @jackgee6210
    @jackgee6210 3 года назад

    非常好,思路和我自己试的时候一样!非常实用!但是我还是有个问题,就是这样子还是要在一个异步函数里面才能获取promise 的结果。有没有办法可以在global的变量作用域中获得promise 结果呢??

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      除非在promise完成工作后设置global变量值,否者在global scope里是提取不了promise结果

  • @Fei-D
    @Fei-D 4 года назад

    谢谢老师!非常详细并且有趣的教学方式。我从今天下午开始跟着这个list做,不知不觉就做完了。请问这个系列还会更新吗?或者说如果对前端感兴趣的话接下来该学哪方面呢?

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад +1

      哇,列表里的视频都实操过了?厉害哦!前端基本上就是html + css + javascript,可以尝试自己做一些小项目

    • @Fei-D
      @Fei-D 4 года назад

      @@wenxuandecode4140 javasript这15个视频跟着做了一次,前面的还好,算是编程通用的知识,但最后几个感觉没完全弄清楚,今天打算 2刷call back 和 promise那几个视频。

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад

      @@Fei-D 太有心了,加油!callback和promise需要点时间掌握,等你以后多做几个项目,很快就能上手!

  • @kenleung8873
    @kenleung8873 2 года назад

    怎么这么久没更新的?全网就你讲得透彻明了,期待。。。

  • @lawkaijian618
    @lawkaijian618 3 года назад

    请问能出一期关于Promise all吗? 这个Promise的视频做得太好了😊

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      谢谢,好的,我知道了,谢谢你的提议😀

  • @elliot_ch
    @elliot_ch 4 года назад

    老师这一集是最后一集吗?

    • @wenxuandecode4140
      @wenxuandecode4140  4 года назад +3

      嗯,目前更新到这一集,后续还是会更新的,记得留守哦~~~

    • @elliot_ch
      @elliot_ch 4 года назад

      @@wenxuandecode4140 谢谢~会的

  • @taofan162
    @taofan162 2 года назад

    多谢老师,学到了

  • @mojiebu2296
    @mojiebu2296 3 года назад

    getUsername 是一個async的function 那如果我想在sync等待一個promise呢? 可以怎樣做

    • @mojiebu2296
      @mojiebu2296 3 года назад

      如果我想等待promise return再按順序execute餘下的所有function呢

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      可以尝试用promise.then()

  • @李茵茵-e6z
    @李茵茵-e6z 3 года назад

    請問為什麼要放settimeout在慢兩秒回傳呢?以及放json的網址在轉換格式用意是什麼?或是可以放其他東西嗎?
    謝謝

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      那个settimeout是用来模拟promise异步执行。fetch api函数不会直接返回请求的json数据,所以需要进一步通过json()函数进行数据转换。你可以尝试打印fetch返回的原始数据就明白了

    • @李茵茵-e6z
      @李茵茵-e6z 3 года назад

      @@wenxuandecode4140感謝您的超迅速回覆,所以說fetch 裡面ㄧ定得放JSON格式囉?表示await後ㄧ定要接fetch嗎
      謝謝

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      @@李茵茵-e6z fetch可以去请求任何一种格式,不一定是JSON,但现在一般都会用JSON作为前台后台数据交换的格式,fetch只是其中一个返回Promise的函数,其他会返回Promise的函数也可以使用await

  • @minigoogle6878
    @minigoogle6878 4 года назад

    请问这里的sendRequest()是异步函数吗?

  • @xiupingwu3952
    @xiupingwu3952 3 года назад

    老师讲的很好 但是最后总结的第三条说async函数返回promise,这个在视频中没有体现呀。为什么是返回promise?

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      你好,谢谢你的留言。关于async函数具体细节可以参考这里:developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function

    • @xiupingwu3952
      @xiupingwu3952 3 года назад

      @@wenxuandecode4140 嗯嗯 我已经找到了 谢谢老师, 老师你讲课真好啊,以后可以讲讲prototype,eventloop, closure, this这些复杂而又常见的问题吗? 我感觉看了你的callback三连,这块儿的知识就通了。

  • @johnnychen9228
    @johnnychen9228 2 года назад

    請問大約11:00 的地方,如果將第4行的reject改成resolve的話,
    我要如何在try區塊內,取到resolve()內的值呢?

  • @joellejoelle7377
    @joellejoelle7377 3 года назад

    最后两期真的很复杂,先反复几次听完,希望以后遇到时能派上用场

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      嗯,sync await还有promise是最常见的,一定会遇到 😀加油!

    • @joellejoelle7377
      @joellejoelle7377 3 года назад

      @@wenxuandecode4140 会出react教程吗?我现在把你教的node刷完后想学react😁

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      @@joellejoelle7377 会的,最近手头上的工作比较多,来不及更新 :)

  • @howong8561
    @howong8561 3 года назад

    Helo, I have difficuities when compiling "fetch" from this and previous tutorial. I used "node.js" software to compile the code. it keep showing "error:ReferenceError: fetch is not defined".
    what should I install to recognize this package? Thanks a lot!

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      Fetch api is not available in nodejs, you may need to install other libraries like axios or node-fetch

  • @phuu186
    @phuu186 2 года назад

    我有一个疑问,await让程序等待上一个执行完毕,那和同步有什么区别呢?相比于直接按顺序写,这样左右什么好处呢

    • @wenxuandecode4140
      @wenxuandecode4140  2 года назад

      如果异步函数按顺序写,异步函数返回值我们就得不到啦

  • @guoxingsun866
    @guoxingsun866 3 года назад

    用过WPF的是见过async await这种使用方式的,对then的使用倒是一头雾水。

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      Promise then很容易理解,大意思就是在等待处理某些阻塞程序后要做什么?比如 fetch ().then() 意思就是当程序访问完某个页面后,你要用返回的数据干嘛,一般会在then里写这样的代码

    • @guoxingsun866
      @guoxingsun866 3 года назад

      @@wenxuandecode4140 谢谢解惑,只是我现在还不习惯。特别是有多个then的时候,我读起来会有些困难,感觉不如let ... await ... 这样更直观。

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      嗯,现在都会使用async await

  • @jenniehayden2382
    @jenniehayden2382 2 года назад

    (function(){
    setTimeout(function(){
    console.log("第1个注册的函数!!")
    },3000);

    setTimeout(function(){
    console.log("第2个注册的函数!!")
    },2000);
    setTimeout(function(){
    console.log("第3个注册的函数!!")
    },1000);

    })();
    这个异步延迟定时器怎么改成 阻塞解构? 按照定时器注册顺序执行呢?

  • @killian85
    @killian85 3 года назад

    Async await 的原意不是在等待執行代碼的同時其他代碼照執行嗎?為什麼還會說「必須等待完成才下一步」?不加async await 也一樣呀

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      你好!这里指的是所有在async function里的await都必须等待完成手头上的任务才能继续下一行代码。await不会阻止event loop去执行其他(async function以外)的代码。async await其实是promise的syntactic sugar,底层是用promise,所以不会造成event loop阻塞。不加async await,像fetch() 就等不到resolve并返回result。

    • @killian85
      @killian85 3 года назад

      @@wenxuandecode4140 抱歉我把裡面和外面的邏輯混亂了

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@killian85 不用抱歉哦,这很正常,因为async/await/promise确实很复杂,一不小心就会混淆~ :)

  • @吳鴻誠
    @吳鴻誠 3 года назад

    請問老師,如何將html表單的資料交由js去處理或解析呢?
    我已經看完node.js系列的教學,明白透過html method可以用get or post傳送表單到server
    但有辦法將html的表單資料先送到js中處理,再傳到server嗎? 謝謝

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      你好!谢谢你的留言。可以在前端先拦截html form post的请求,然后再通过fetch()提交。有时间可以参考一下这个链接:
      simonplend.com/how-to-use-fetch-to-post-form-data-as-json-to-your-api/

    • @吳鴻誠
      @吳鴻誠 3 года назад

      @@wenxuandecode4140 瞭解,謝謝!

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@吳鴻誠 不客气,加油!

  • @sA-cn8ce
    @sA-cn8ce 3 года назад

    為啥你打印出來的json data,key都沒有被引號包住

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      这是Google Chrome数据json数据的默认行为。你可以测试以下代码:
      const data = {
      "test": 'world',
      hi: 'there',
      }

    • @sA-cn8ce
      @sA-cn8ce 3 года назад

      @@wenxuandecode4140
      所以我無法在console中分辨json跟一般物件property是嗎

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      Json的格式是根据object演变,所以看起来大差不差,但实际上json是文本,用来保存或者传输数据。为什么你需要区分?能描述一下使用场景吗?

  • @johnmichael9495
    @johnmichael9495 3 года назад

    为什么我的JavaScript在写时她不会显示关键字给我直接填写?

  • @abulalalalalaabulala4521
    @abulalalalalaabulala4521 3 года назад +1

    为什么我javascript在写时不会出现关键字给我直接填写?有谁可以帮我吗?

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      你用的是什么编辑器?

    • @abulalalalalaabulala4521
      @abulalalalalaabulala4521 3 года назад

      Vs code 和你一样的

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@abulalalalalaabulala4521 你保存的文件是以.js命名吗?

    • @abulalalalalaabulala4521
      @abulalalalalaabulala4521 3 года назад

      @@wenxuandecode4140哈哈不用了,他突然又有回了,之前也是遇到一次这样的情况,过不就又恢复了

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      @@abulalalalalaabulala4521 哈哈,好突然,不过解决了就好,有时间去Codetisan自学编程社区互动吧~ :)

  • @abulalalalalaabulala4521
    @abulalalalalaabulala4521 3 года назад

    老师能不能在评论区和我简单解释一下keyword this 🤣

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      这个三言两语说不清哦,需要上视频,哈哈😃

  • @mtfnu-7hammerdown306
    @mtfnu-7hammerdown306 2 года назад

    Async is a researcher foundation and they found the backroom s

  • @hanghang9104
    @hanghang9104 3 года назад

    字幕是两层,不清楚啊。

  • @eddiesia1282
    @eddiesia1282 3 года назад

    有看沒懂,估計真的要真用才能深入瞭解。

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад

      嗯,这个async await的概念比较复杂,需要动手实操一遍才好理解 :)

    • @eddiesia1282
      @eddiesia1282 3 года назад

      @@wenxuandecode4140 好的好的

  • @imjeffreylee
    @imjeffreylee 3 года назад

    老實說我還是覺得then比較直覺...做完a然後接著做b

    • @wenxuandecode4140
      @wenxuandecode4140  3 года назад +1

      嗯,比起callback, then又比较直观。async await的出现主要是想模拟以前按行执行的模式,把callback和promise模糊掉,对于曾经学过c/java/php的同学来说会比较有亲切感。

  • @NekoChan0122
    @NekoChan0122 4 года назад +1

    這集和Promise差不多,第一次看完都無法完全理解😂,期待下一集👍

  • @TheXuism
    @TheXuism 3 года назад

    await 比 promise 好用

  • @foxplaysguitar
    @foxplaysguitar 2 года назад

    感謝教學,非常清楚!