Promise async await trong Javascript | JSGOPRO #4

Hế lô hế lô, Ông dev đây!
Video này mình sẽ nói về promise async await trong javascript.
Chapters:
0:00 Mở đầu
0:24 Macro, micro tasks callback
2:55 Promise
6:08 Async await
10:21 Promise all
16:53 Async await với map, foreach
19:39 Kết
Playlist: kzread.info/head/PLoaAbmGPgTSPC5Iy99rNDgei-l7anFixw
Source code: github.com/OngDevTutorials/jsgopro
Link Q&A: duynguyen959759.typeform.com/to/JtCF2Z
--- Để xem những video về lập trình ---
Nhấn vào đây để theo dõi kênh mình nhé: tinyurl.com/SubscribeOngDev
--- Blog của mình ---
blog.ongdev.com
--- Ủng hộ Ông Dev ---
unghotoi.com/ongdev
--- Facebook page của mình ---
ongdevvuitinh
Cảm ơn các bạn đã quan tâm theo dõi
#ôngdev #jsgopro

Пікірлер: 64

  • @bachkhoahuynh9110
    @bachkhoahuynh91108 ай бұрын

    Giải thích chỗ 14:20 không chính xác. Trong multitasking với single thread, không phải lúc nào khi đợi cùng lúc ba task đồng thời thì sẽ đợi xong khi task chạy lâu nhất kết thúc. Điều này sẽ chỉ đúng, nếu như personA, personB và personC chứa các tác vụ IO (định nghĩa tác vụ IO rất tổng quát, trong ngữ cảnh Javascript thì là các tác vụ không được thực thi bởi Javascript Engine như fetch dữ liệu). Nếu như personA, personB, personC không chứa các tác vụ IO thì nó sẽ không khác gì chạy tuần tự cho dù dùng Promise.all. Mình có đọc một số comment của bạn ở dưới thì sẽ có một số lỗi sai sau. 1. Với code sau: const task1 = getResultApi1() const task2 = getResultApi2() const task3 = getResultApi3() const task4 = getResultApi4() const resultTask1 = await task1 const resultTask2 = await task2 const resultTask3 = await task3 const resultTask4 = await task4 thì nó không phải chạy tuần tự như bạn nói mà task1, task2, task3, task4 đều chạy đồng thời do khi tạo Promise xong thì nó sẽ được fire ngay lập tức, và kết quả của code này không khác gì Promise.all 2. Promise.all là chạy đồng thời, chứ không có gì là "Nó ko phải là chạy đồng thời, thực ra nó vẫn là tuần tự". Đó là bạn đang không hiểu chạy đồng thời và tác vụ IO là gì.

  • 8 ай бұрын

    Cảm ơn bạn đã giải thích thêm cho mọi người hiểu về Promise.all Comment này mình pin nha, để những bạn sau vào còn biết.

  • @HuyPham-uq5dn
    @HuyPham-uq5dn2 жыл бұрын

    thật sự những series chia sẽ kiến thức của anh rất giá trị. Đặc biệt với những bạn tự học lập trình dễ bị thiếu các tư duy nền như này

  • @JamLangThang
    @JamLangThang2 жыл бұрын

    thanks anh. Xem bao nhiêu video không hiểu tới video anh có vẻ hợp với cách hưogns dẫn của anh lên hiểu quá

  • @user-nf7fd8dg1r
    @user-nf7fd8dg1r3 жыл бұрын

    Subs ngay và luôn. Kiến thức khá cao siêu so với trình của mình hiện tại. Mới fetch data rồi render thôi.

  • @kienphantrung8099
    @kienphantrung80993 жыл бұрын

    Hay quá anh ơii, cảm ơn anh nhé :D

  • @siriusblack311
    @siriusblack3112 жыл бұрын

    mong a làm nhiều về js, xem bài của a dễ hiểu bản chất của ngôn ngữ lắm ạ

  • @kunkon21
    @kunkon212 жыл бұрын

    video khá hay :D mình phải xem lại 2 lầ để hiểu rõ hơn. đúng vấn đề mình đang gặp khi dùng foreach mà trong đó có function là promise.

  • @linhnguyenquang7579

    @linhnguyenquang7579

    2 жыл бұрын

    a Béo :)

  • @thosan3090
    @thosan3090 Жыл бұрын

    +1 sub, quá hay và dễ hiểu

  • @nguyenvantien2103
    @nguyenvantien21033 жыл бұрын

    Ông dev làm về clean code chia file ra như thế nào đi. Em viết code khởi tạo rất nhiều hàm nhìn rối quá mà chưa biết format lại thế nào cho hợp lí cảm ơn Ong Dev

  • @phapnguyen155
    @phapnguyen1553 жыл бұрын

    vip

  • @tungkiz
    @tungkiz3 жыл бұрын

    Có 1 điều của Promise.all là 1 task fail là result fail (vào catch), mặc dù các task khác success.

  • @thongvo7285

    @thongvo7285

    2 жыл бұрын

    theo mình hay sử dụng cách all này trong những trường hợp load init mấy cái data config là chính. chứ dùng login khác thì hơi toang =)))

  • @nguyenmanh8330
    @nguyenmanh83303 жыл бұрын

    Áo hồng xinh vại :V

  • @TungNguyen-wt7vc
    @TungNguyen-wt7vc3 жыл бұрын

    Góp ý với anh là phát âm rõ 2 từ micro với macro với ạ. Em nghe anh đọc 2 từ cứ như một cứ bị confuse ấy @@

  • @trivan9859

    @trivan9859

    2 жыл бұрын

    The same :v

  • @itvisualproduction4937
    @itvisualproduction49372 жыл бұрын

    bạn ơi bạn làm nhiều video về promise với observable, rxjs, angular, typescript được ko bạn ? vì mình thấy có nhiều chủ đề hay mà thực tế đi làm ấy bạn. cảm ơn bạn.

  • @tristheflash6928

    @tristheflash6928

    2 жыл бұрын

    ông dev làm vue nên m nghĩ chắc là ko có lm về những feature lq đến angular như b ns đâu

  • @tinhdoan1584
    @tinhdoan1584 Жыл бұрын

    em đã tái hiện được testspeed giữa async/await và promise, và mọi chuyện vẫn đúng(async/await nhanh hơn) cho đến khi em thay đổi vị trí block code của promise và async/await với nhau (promise chạy trước) thì sẽ cho kết quả ngược lại (promise nhanh hơn)

  • @bachkhoahuynh9110

    @bachkhoahuynh9110

    8 ай бұрын

    Javascript là một trình JIT, khi chạy code lần đầu tiên nó bao gồm 2 bước là dịch qua mã trung gian và tối ưu hóa mã trung gian, ở các lần chạy tiếp theo thì nếu gọi lại một hàm đã được tối ưu thì nó sẽ luôn chạy nhanh hơn lần đầu rất nhiều. Nếu bạn tách ra hai chương trình riêng để chạy thì sẽ có kết quả chính xác hơn.

  • @khoavo1602
    @khoavo16023 жыл бұрын

    Mong anh làm thêm video giải thích cách hoạt động của setImmediate(), nextTick(), setTimeout(fn,0) và bản chất của EventEmitter trong Event loop mấy cái này tìm hiểu khá mơ hồ.

  • @trandoan4526

    @trandoan4526

    3 жыл бұрын

    xem kênh học cơ bản có nói đấy bạn

  • @khoavo1602

    @khoavo1602

    3 жыл бұрын

    @@trandoan4526 a cho em xin link

  • @liamnguyen1748
    @liamnguyen17483 жыл бұрын

    14:29 Anh ơi, js là single thread mà tại sao lại có hiện tượng Promise.all này thực hiện được ạ? vì mỗi 1 loop nó lại thực hiện 1 callback trong callback queue ạ? vậy lúc queue thì thằng 5s nó có đứng đầu trong queue không anh?

  • 3 жыл бұрын

    Chỗ đó mình truyền vào 1 list promise, chứ ko phải mình truyền 1 list call back, và cả đống promise đó nó chỉ có 1 callback là của thằng promise all thôi.

  • @liamnguyen1748

    @liamnguyen1748

    3 жыл бұрын

    @ dạ, cám ơn anh vì videos bổ ích ạ

  • @thoaivuquang4240
    @thoaivuquang42403 жыл бұрын

    cho em hỏi chút, value được async function thì chỉ dùng được trong then hoặc async function khác thôi ạ hay có thể dùng được cả bên ngoài, hàm thường khác? Em cảm ơn.

  • 3 жыл бұрын

    Value đc promise resolve ra thì chỉ đc dùng trong block then của promise đó thôi nha e

  • @thoaivuquang4240

    @thoaivuquang4240

    3 жыл бұрын

    @ cảm ơn anh.

  • @toanta4838
    @toanta4838 Жыл бұрын

    10:14 sao e return arr trong .then( (val) => arr.push; return arr) và nó trả về 1 value mà , sao của a vẫn trả ra 1 arr đc nhỉ ???

  • @upagency7439
    @upagency74392 жыл бұрын

    anh cho em hỏi, tại phauts 9:26 anh đang return về arr => function đó nó trả về đâu phải promise đâu ạ. mong a giải đáp, e cảm ơn a

  • 2 жыл бұрын

    A đang nói cái block getOngDev().then mà e

  • @thienngo2953
    @thienngo29532 жыл бұрын

    coi 2 lần thì cũng hiểu :v

  • @softwareanddesign6641
    @softwareanddesign66413 жыл бұрын

    Sống 22 năm trên đời giờ mới biết for await

  • @nakamotosatoshi6769
    @nakamotosatoshi6769 Жыл бұрын

    Nếu lồng vòng for vào trong promise.all của map thì sao anh nhỉ?

  • Жыл бұрын

    Cho cái ví dụ cụ thể đi e :v

  • @chauminh1313
    @chauminh13133 жыл бұрын

    "jsgopro là series mình chỉ nói về mấy cái nhỏ linh tinh js thôi" nhưng video này thì hết "linh tinh" r :)))) kaka

  • @trandinhthang5778
    @trandinhthang57782 жыл бұрын

    Sao sử dụng promise thì nó không chờ mà console.log trước nhỉ . Còn asyn await thì nó lại chờ

  • 2 жыл бұрын

    Bản chất cái async nó sẽ trả về 1 promise, cái await là mình bảo nó chờ nha.

  • @tannguyen20-07
    @tannguyen20-073 жыл бұрын

    Spread operator với rest operator nữa đi ông dev :)))

  • @NguyenTuanat-xb3rs
    @NguyenTuanat-xb3rs3 жыл бұрын

    a ơi, pass udemy bị đổi r . Em ko vào được nữa ạ

  • 3 жыл бұрын

    Uh có vẻ như tk bị khoá luôn rồi. A thử đổi pass rồi vào cũng ko đc

  • @NguyenTuanat-xb3rs

    @NguyenTuanat-xb3rs

    3 жыл бұрын

    :( e đang xem 1 khoá đang cuốn

  • @hiepnguyenduc2114
    @hiepnguyenduc21142 жыл бұрын

    Hello a, a ơi cho em hỏi cách dưới đây thì nó chạy như nào ạ. Theo em hiểu thì mới vô nó chạy đông thời 4 thag task rồi khi nào tới resultTask1 thì nó đợi để lấy kết quả (nếu task 1 chưa xong, các task2,3,4 vẫn đag chạy bình thường nếu chưa xong ạ). Em cám ơn a ạ. ------------------------------------ const task1 = getResultApi1() const task2 = getResultApi2() const task3 = getResultApi3() const task4 = getResultApi4() const resultTask1 = await task1 // do something const resultTask2 = await task2 // do something const resultTask3 = await task3 // do something const resultTask4 = await task4

  • 2 жыл бұрын

    Không nha e, 4 cái đó nó sẽ chạy tuần tự từng cái 1 nha, await có nghĩa là chờ cho cái async chạy xong á

  • @hiepnguyenduc2114

    @hiepnguyenduc2114

    2 жыл бұрын

    @ dạ v muốn nó chạy đồng thời thì chỉ có xài Promise.all thôi phải không ạ

  • @hiepnguyenduc2114

    @hiepnguyenduc2114

    2 жыл бұрын

    @ dạ e cám ơn a =))

  • 8 ай бұрын

    Do có 1 bạn nói về việc giải thích sai ở đây, nên a cũng nói thêm để mọi người cùng clear dù có thể mọi người sẽ chỉ coi đây là sự bào chữa của a :v Này thì 2 năm rồi, nhưng a nghĩ lý do tại sao a trả lời là const task1 = getResultApi1() const task2 = getResultApi2() const task3 = getResultApi3() const task4 = getResultApi4() A nói ở đây 4 thằng này chạy tuần tự vì a nghĩ e đặt tên task1,task2,... nghĩa là e đang return về 1 promise ở function getResultApi... Còn nếu ở đây getResultApi1 là 1 async function thì nó đã đc execute rồi, và 4 lệnh trên nó sẽ chạy đồng thời.

  • @cucu1817
    @cucu18173 жыл бұрын

    e nghĩ a nên tậu thêm 1 cái mic để nói cho rõ

  • 3 жыл бұрын

    E thấy cái cục trắng trên bàn ko :v đó là cái mic đó, do cái video này a để nhạc nền hơi to á, a sẽ cải thiện sau.

  • @tristheflash6928
    @tristheflash69282 жыл бұрын

    đoạn em đọc promise.all em xem lại vs đọc thêm cả 5 lần mới hiểu :v , theo ý hiểu của em là nó sẽ chạy đồng thời và nó chỉ quan tâm là đợi cái th promise chạy lâu nhất ra cuối thì sẽ trả ra nguyên cái arr 3 person đúng ko ạ :v

  • 2 жыл бұрын

    Nó ko phải là chạy đồng thời, thực ra nó vẫn là tuần tự, nhưng promise all nó sẽ là: tất cả promise đều resolved -> promise all resolve, 1 trong đống promise rệct -> promise all reject

  • @tristheflash6928

    @tristheflash6928

    2 жыл бұрын

    @ dạ em cảm ơn anh nhiều yêu anh

  • 2 жыл бұрын

    @@tristheflash6928 À thêm cái nữa, là promise all nó ko có liên quan đến việc chạy tuần tự hay chạy song song nha e. 2 cái đó nó phụ thuộc vào CPU của e là đơn nhân hay là đa nhân. Đơn nhân thì nó tuần tự, đa nhân thì nó chạy song song á. Còn trên browser, thì api của nó có thread pool có size là 4, thì nó vẫn có thể chạy song song, nhưng anh nhắc lại, là cái promise.all không liên quan đến chạy song song nha

  • @tristheflash6928

    @tristheflash6928

    2 жыл бұрын

    Promise.allSettled func này em thấy nó sẽ chạy hết được cả resovel lẫn reject ý anh , anh thấy sao ạ

  • @tristheflash6928

    @tristheflash6928

    2 жыл бұрын

    @ hxxx mà em cám ơn anh cách giải thích của anh :Vvv mặc dù em phải nghe lại chắc chục lần :))) là cái marcro nó sẽ exc vào cái even loop tiếp theo còn cái micro nó sẽ exc trước khi chạy cái event loop nên đó là lí do nếu chạy console.log trong code luôn luôn là th micro nó sẽ ra trước :v

  • @boyhotkey96
    @boyhotkey96 Жыл бұрын

    sao em thử test .numberOfElements nó đều trả về undefined a nhỉ. em search google cũng ko thấy thằng này

  • Жыл бұрын

    Thì đó là cái api của a :v giờ nó ko chạy nữa, thì nó lo có thôi e :v

  • @boyhotkey96

    @boyhotkey96

    Жыл бұрын

    @ em cứ tưởng đó là phương thức của js có sẵn.. vâng anh ạ, giờ thì em hiểu rồi. Rất cảm ơn anh đã phản hồi sớm ạ