Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • icon picker
          Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
Promises, Async/Await, Callback

Promises, Async/Await, Callback

🔎 async function là gì?

async/await là cú pháp giúp viết code bất đồng bộ (asynchronous) trông giống như code tuần tự
được đưa vào ECMAScript 2017 (ES8)
Callback

Cách cũ (ES5 – dùng callback hoặc Promise.then)

Promise là cách tiếp cận xử lý async và callback.
nó chỉ là một Object, đại diện cho future value
useFeature, featureHandler
sau khi hoàn thành, nó sẽ trả lại một giá trị
A Promise is an object that represents the eventual result of an asynchronous operation.
It can be in one of three states:
- Pending – the async operation hasn’t finished yet.
- Fulfilled – the operation succeeded (calls resolve).
- Rejected – the operation failed (calls reject).
More often than not, you will be using Promises when working with APIs rather than creating them yourself. However, it is important to understand how they work.
⁠
image.png
⁠
⁠
Không dùng Arrow Function
Dùng Arrow Function

Cách mới (ES8 – async/await)

👉 Kết quả giống nhau, nhưng async/await dễ đọc, dễ debug hơn.
The `async` keyword is used to define an asynchronous function, and the `await` keyword is used to wait for the Promise to resolve. We can use `try` and `catch` blocks to handle the resolved and rejected Promises.
⁠

🔁 So sánh với ES5

ES5 (2010): chưa có Promise, phải dùng callback hell.
ES6 (2015): giới thiệu Promise.
ES8 (2017): giới thiệu async/await, viết code trên Promise cho gọn.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.