Hướng dẫn wait for async function to finish javascript - chờ chức năng async kết thúc javascript

Khi nào một chức năng không đồng bộ kết thúc? Và tại sao đây là một câu hỏi khó trả lời?

Nó chỉ ra rằng sự hiểu biết các chức năng không đồng bộ đòi hỏi rất nhiều kiến ​​thức về cách thức hoạt động cơ bản của JavaScript.

Chúng ta hãy khám phá khái niệm này và tìm hiểu rất nhiều về JavaScript trong quá trình này.

Bạn đã sẵn sàng chưa? Đi nào.

Mã không đồng bộ là gì?

Theo thiết kế, JavaScript là ngôn ngữ lập trình đồng bộ. Điều này có nghĩa là khi mã được thực thi, JavaScript bắt đầu ở đầu tệp và chạy qua dòng mã theo từng dòng, cho đến khi nó được thực hiện.

Kết quả của quyết định thiết kế này là chỉ có một điều có thể xảy ra bất cứ lúc nào.

Bạn có thể nghĩ về điều này như thể bạn đang tung hứng sáu quả bóng nhỏ. Trong khi bạn đang tung hứng, bàn tay của bạn bị chiếm đóng và không thể xử lý bất cứ điều gì khác.

Nó tương tự với JavaScript: một khi mã được chạy, nó có bàn tay đầy đủ với mã đó. Chúng tôi gọi đây là loại chặn mã đồng bộ. Bởi vì nó có hiệu quả chặn mã khác chạy.

Hãy quay trở lại ví dụ tung hứng. Điều gì sẽ xảy ra nếu bạn muốn thêm một quả bóng khác? Thay vì sáu quả bóng, bạn muốn tung hứng bảy quả bóng. Đó có thể là một vấn đề.

Bạn không muốn ngừng tung hứng, bởi vì nó rất vui. Nhưng bạn cũng không thể đi và nhận một quả bóng khác, bởi vì điều đó có nghĩa là bạn phải dừng lại.

Giải pháp? Ủy thác công việc cho một người bạn hoặc thành viên gia đình. Họ không tung hứng, vì vậy họ có thể đi và lấy bóng cho bạn, sau đó ném nó vào trò tung hứng của bạn vào thời điểm mà bàn tay của bạn miễn phí và bạn đã sẵn sàng để thêm một quả bóng giữa một giữa.

Đây là mã không đồng bộ là. JavaScript đang ủy thác công việc cho một thứ khác, sau đó đi về kinh doanh của riêng mình. Sau đó, khi nó sẵn sàng, nó sẽ nhận được kết quả từ công việc.

Ai đang làm công việc khác?

Được rồi, vì vậy chúng ta biết rằng JavaScript là đồng bộ và lười biếng. Nó không muốn tự mình làm tất cả các công việc, vì vậy nó trang trại nó cho một thứ khác.

Nhưng ai là thực thể bí ẩn này làm việc cho JavaScript? Và làm thế nào để nó được thuê để làm việc cho JavaScript?

Chà, chúng ta hãy xem một ví dụ về mã không đồng bộ.

const logName = () => {
   console.log("Han")
}

setTimeout(logName, 0)

console.log("Hi there")

Chạy mã này dẫn đến đầu ra sau trong bảng điều khiển:

// in console
Hi there
Han

Được rồi. Chuyện gì đang xảy ra?

Nó chỉ ra rằng cách chúng ta trang trại công việc trong JavaScript là sử dụng các chức năng và API dành riêng cho môi trường. Và đây là một nguồn gây nhầm lẫn lớn trong JavaScript.

JavaScript luôn chạy trong một môi trường.

Thông thường, môi trường đó là trình duyệt. Nhưng nó cũng có thể có trên máy chủ với NodeJS. Nhưng cái gì trên trái đất là sự khác biệt?

Sự khác biệt-và điều này rất quan trọng-là trình duyệt và máy chủ (nodejs), chức năng khôn ngoan, không tương đương. Chúng thường giống nhau, nhưng chúng không giống nhau.

Hãy minh họa điều này với một ví dụ. Giả sử JavaScript là nhân vật chính của một cuốn sách giả tưởng sử thi. Chỉ là một đứa trẻ nông trại bình thường.

Bây giờ chúng ta hãy nói rằng đứa trẻ nông trại này đã tìm thấy hai bộ áo giáp đặc biệt mang lại cho họ sức mạnh vượt quá chính họ.

Khi họ sử dụng bộ đồ áo giáp, họ đã có quyền truy cập vào một bộ khả năng nhất định.

Khi họ sử dụng bộ đồ giáp, họ đã có quyền truy cập vào một bộ khả năng khác.

Những bộ đồ này có một số sự chồng chéo, bởi vì những người tạo ra những bộ đồ này có cùng nhu cầu ở một số nơi nhất định, nhưng không phải ở những nơi khác.

Đây là những gì một môi trường là. Một nơi mà mã được chạy, nơi có các công cụ tồn tại được xây dựng trên đầu ngôn ngữ JavaScript hiện có. Chúng không phải là một phần của ngôn ngữ, nhưng dòng thường bị mờ vì chúng tôi sử dụng các công cụ này mỗi ngày khi chúng tôi viết mã.

SetTimeout, Fetch và DOM đều là những ví dụ về API Web. (Bạn có thể thấy danh sách đầy đủ các API Web tại đây.) Chúng là các công cụ được tích hợp vào trình duyệt và được cung cấp cho chúng tôi khi mã của chúng tôi được chạy.

Và bởi vì chúng tôi luôn chạy JavaScript trong một môi trường, có vẻ như đây là một phần của ngôn ngữ. Nhưng họ không.

Vì vậy, nếu bạn đã từng tự hỏi tại sao bạn có thể sử dụng Fetch trong JavaScript khi bạn chạy nó trong trình duyệt (nhưng cần cài đặt gói khi bạn chạy nó trong NodeJS), đây là lý do tại sao. Ai đó nghĩ rằng Fetch là một ý tưởng tốt, và xây dựng nó như một công cụ cho môi trường NodeJS.

Gây nhầm lẫn? Đúng!

Nhưng bây giờ cuối cùng chúng ta cũng có thể hiểu được những gì đảm nhận công việc từ JavaScript và cách nó được thuê.

Nó chỉ ra rằng đó là môi trường đảm nhận công việc và cách để môi trường thực hiện công việc đó, là sử dụng chức năng thuộc về môi trường. Ví dụ, tìm nạp hoặc settimeout trong môi trường trình duyệt.

Điều gì xảy ra với công việc?

Tuyệt quá. Vì vậy, môi trường đảm nhận công việc. Rồi sao?

Tại một số điểm bạn cần lấy lại kết quả. Nhưng chúng ta hãy nghĩ về việc điều này sẽ hoạt động như thế nào.

Hãy quay lại ví dụ tung hứng ngay từ đầu. Hãy tưởng tượng bạn đã yêu cầu một quả bóng mới, và một người bạn mới bắt đầu ném bóng vào bạn khi bạn chưa sẵn sàng.

Đó sẽ là một thảm họa. Có lẽ bạn có thể gặp may mắn và bắt nó và đưa nó vào thói quen của bạn một cách hiệu quả. Nhưng có một cơ hội lớn là nó có thể khiến bạn thả tất cả các quả bóng của bạn và làm hỏng thói quen của bạn. Sẽ không tốt hơn nếu bạn đưa ra hướng dẫn nghiêm ngặt về thời điểm nhận bóng?

Hóa ra, có những quy tắc nghiêm ngặt xung quanh khi JavaScript có thể nhận được công việc được ủy quyền.

Những quy tắc đó được điều chỉnh bởi vòng lặp sự kiện và liên quan đến hàng đợi microtask và macrotask. Vâng tôi biết. Nó rất nhiều. Nhưng hãy chịu đựng tôi.

Được rồi. Vì vậy, khi chúng tôi ủy thác mã không đồng bộ cho trình duyệt, trình duyệt lấy và chạy mã và nhận khối lượng công việc đó. Nhưng có thể có nhiều nhiệm vụ được trao cho trình duyệt, vì vậy chúng tôi cần đảm bảo rằng chúng tôi có thể ưu tiên các nhiệm vụ này.

Đây là nơi hàng đợi microtask và hàng đợi macrotask xuất hiện. Trình duyệt sẽ thực hiện công việc, làm điều đó, sau đó đặt kết quả vào một trong hai hàng đợi dựa trên loại công việc mà nó nhận được.

Lời hứa, ví dụ, được đặt trong hàng đợi microtask và được ưu tiên cao hơn.

Các sự kiện và setTimeout là các ví dụ về công việc được đặt trong hàng đợi macrotask và được ưu tiên thấp hơn.

Bây giờ một khi công việc được hoàn thành và được đặt vào một trong hai hàng đợi, vòng lặp sự kiện sẽ chạy qua lại và kiểm tra xem JavaScript có sẵn sàng nhận kết quả hay không.

Chỉ khi JavaScript được thực hiện thực hiện tất cả các mã đồng bộ của nó, và tốt và sẵn sàng, vòng lặp sự kiện mới bắt đầu chọn từ hàng đợi và đưa các chức năng trở lại JavaScript để chạy.

Vì vậy, chúng ta hãy xem một ví dụ:

setTimeout(() => console.log("hello"), 0) 

fetch("https://someapi/data").then(response => response.json())
                             .then(data => console.log(data))

console.log("What soup?")

Đơn hàng sẽ ở đây gì?

1. Đầu tiên, SetTimeout được ủy quyền cho trình duyệt, công việc và đặt chức năng kết quả trong hàng đợi macrotask.
2. Thứ hai, tìm nạp được ủy quyền cho trình duyệt, lấy công việc. Nó lấy dữ liệu từ điểm cuối và đặt các chức năng kết quả trong hàng đợi microtask.
3. JavaScript đăng xuất "Soup" gì?
4. Vòng lặp sự kiện kiểm tra xem JavaScript có sẵn sàng nhận kết quả từ công việc xếp hàng hay không.
5. Khi console.log được thực hiện, JavaScript đã sẵn sàng. Vòng lặp sự kiện chọn các chức năng xếp hàng từ hàng đợi microtask, ưu tiên cao hơn và đưa chúng trở lại JavaScript để thực hiện.
6. Sau khi hàng đợi microtask trống, cuộc gọi lại setTimeout được đưa ra khỏi hàng đợi macrotask và trả lại cho JavaScript để thực thi.

In console:
// What soup?
// the data from the api
// hello

Hứa hẹn

Bây giờ bạn nên có rất nhiều kiến ​​thức về cách xử lý mã không đồng bộ bởi JavaScript và môi trường trình duyệt. Vì vậy, hãy nói về những lời hứa.

Một lời hứa là một cấu trúc JavaScript đại diện cho một giá trị chưa biết trong tương lai. Về mặt khái niệm, một lời hứa chỉ là JavaScript hứa hẹn sẽ trả về một giá trị. Nó có thể là kết quả từ một cuộc gọi API hoặc nó có thể là một đối tượng lỗi từ yêu cầu mạng không thành công. Bạn được đảm bảo để có được một cái gì đó.

const promise = new Promise((resolve, reject) => {
	// Make a network request
   if (response.status === 200) {
      resolve(response.body)
   } else {
      const error = { ... }
      reject(error)
   }
})

promise.then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})

Một lời hứa có thể có các trạng thái sau:

• Hoàn thành - hành động đã hoàn thành thành công
• bị từ chối - hành động không thành công
• Đang chờ xử lý - Không có hành động nào được hoàn thành
• định cư - đã được thực hiện hoặc từ chối

Một lời hứa nhận được một quyết tâm và một chức năng từ chối có thể được gọi để kích hoạt một trong những trạng thái này.

Một trong những điểm bán hàng lớn là chúng ta có thể chuỗi các chức năng mà chúng ta muốn xảy ra khi thành công (giải quyết) hoặc thất bại (từ chối):

• Để đăng ký một chức năng để chạy trên thành công, chúng tôi sử dụng. Sau đó
• Để đăng ký một chức năng để chạy trên thất bại, chúng tôi sử dụng .catch

// Fetch returns a promise
fetch("https://swapi.dev/api/people/1")
	.then((res) => console.log("This function is run when the request succeeds", res)
    .catch(err => console.log("This function is run when the request fails", err)
           
// Chaining multiple functions
 fetch("https://swapi.dev/api/people/1")
	.then((res) => doSomethingWithResult(res))
    .then((finalResult) => console.log(finalResult))
    .catch((err => doSomethingWithErr(err))

Hoàn hảo. Bây giờ chúng ta hãy xem xét kỹ hơn những gì nó trông giống như dưới mui xe, sử dụng Fetch làm ví dụ:

const fetch = (url, options) => {
  // simplified
  return new Promise((resolve, reject) => {

  const xhr = new XMLHttpRequest()
  // ... make request
  xhr.onload = () => {
    const options = {
        status: xhr.status,
        statusText: xhr.statusText
        ...
    }
    
    resolve(new Response(xhr.response, options))
  }
  
  xhr.onerror = () => {
    reject(new TypeError("Request failed"))
  }
}
 
 fetch("https://swapi.dev/api/people/1")
   // Register handleResponse to run when promise resolves
	.then(handleResponse)
  .catch(handleError)
  
 // conceptually, the promise looks like this now:
 // { status: "pending", onsuccess: [handleResponse], onfailure: [handleError] }
  
 const handleResponse = (response) => {
  // handleResponse will automatically receive the response, ¨
  // because the promise resolves with a value and automatically injects into the function
   console.log(response)
 }
 
  const handleError = (response) => {
  // handleError will automatically receive the error, ¨
  // because the promise resolves with a value and automatically injects into the function
   console.log(response)
 }
  
// the promise will either resolve or reject causing it to run all of the registered functions in the respective arrays
// injecting the value. Let's inspect the happy path:
  
// 1. XHR event listener fires
// 2. If the request was successfull, the onload event listener triggers
// 3. The onload fires the resolve(VALUE) function with given value
// 4. Resolve triggers and schedules the functions registered with .then
  
  

Vì vậy, chúng tôi có thể sử dụng lời hứa để thực hiện công việc không đồng bộ và để chắc chắn rằng chúng tôi có thể xử lý bất kỳ kết quả nào từ những lời hứa đó. Đó là đề xuất giá trị. Nếu bạn muốn biết thêm về những lời hứa, bạn có thể đọc thêm về chúng ở đây và ở đây.

Khi chúng tôi sử dụng lời hứa, chúng tôi chuỗi các chức năng của chúng tôi lên lời hứa sẽ xử lý các kịch bản khác nhau.

Điều này hoạt động, nhưng chúng tôi vẫn cần xử lý logic bên trong các cuộc gọi lại (chức năng lồng nhau) khi chúng tôi lấy lại kết quả. Điều gì sẽ xảy ra nếu chúng ta có thể sử dụng lời hứa nhưng viết mã nhìn đồng bộ? Hóa ra chúng ta có thể.

Async/Await là một cách viết lời hứa cho phép chúng ta viết mã không đồng bộ theo cách đồng bộ. Chúng ta hãy có một cái nhìn.

const getData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    const data = await response.json()
    
    console.log(data)
}

getData()

Không có gì thay đổi dưới mui xe ở đây. Chúng tôi vẫn đang sử dụng lời hứa để tìm nạp dữ liệu, nhưng bây giờ nó trông đồng bộ và chúng tôi không còn có khối. Sau đó và .catch.

ASYNC / AIDIT thực sự chỉ là đường cú pháp cung cấp một cách để tạo mã dễ lý luận hơn, mà không thay đổi động lực cơ bản.

Hãy xem cách nó hoạt động.

ASYNC/AIDIT cho phép chúng tôi sử dụng các trình tạo để tạm dừng việc thực thi một hàm. Khi chúng tôi đang sử dụng async / chờ đợi, chúng tôi không chặn vì chức năng mang lại điều khiển trở lại chương trình chính.

Sau đó, khi lời hứa giải quyết, chúng tôi đang sử dụng trình tạo để mang lại điều khiển trở lại hàm không đồng bộ với giá trị từ lời hứa đã giải quyết.

Bạn có thể đọc thêm ở đây để biết tổng quan tuyệt vời về máy phát điện và mã không đồng bộ.

Trên thực tế, bây giờ chúng ta có thể viết mã không đồng bộ trông giống như mã đồng bộ. Điều đó có nghĩa là dễ dàng hơn để lý luận và chúng ta có thể sử dụng các công cụ đồng bộ để xử lý lỗi như thử / bắt:

const getData = async () => {
    try {
    	const response = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    	const data = await response.json()
        console.log(data)
    } catch (err) {
       console.log(err)
    }
    
}

getData()

Được rồi. Vậy làm thế nào để chúng ta sử dụng nó? Để sử dụng async / chờ đợi, chúng ta cần phải chuẩn bị cho chức năng với async. Điều này không làm cho nó trở thành một hàm không đồng bộ, nó chỉ cho phép chúng ta sử dụng chờ đợi bên trong nó.

Không cung cấp từ khóa Async sẽ dẫn đến lỗi cú pháp khi cố gắng sử dụng đang chờ trong một hàm thông thường.

const logName = () => {
   console.log("Han")
}

setTimeout(logName, 0)

console.log("Hi there")

Bởi vì điều này, chúng tôi không thể sử dụng Async / đang chờ trên mã cấp cao nhất. Nhưng Async và chờ đợi vẫn chỉ là đường cú pháp trên những lời hứa. Vì vậy, chúng tôi có thể xử lý các trường hợp cấp cao nhất với chuỗi hứa hẹn:

const logName = () => {
   console.log("Han")
}

setTimeout(logName, 0)

console.log("Hi there")

Điều này phơi bày một sự thật thú vị khác về Async / đang chờ đợi. Khi xác định một chức năng là async, nó sẽ luôn trả lại một lời hứa.

Sử dụng async / chờ đợi có vẻ như phép thuật lúc đầu. Nhưng giống như bất kỳ phép thuật nào, nó chỉ là công nghệ đủ tiên tiến đã phát triển trong những năm qua. Hy vọng bây giờ bạn có một nắm bắt vững chắc về các nguyên tắc cơ bản, và có thể sử dụng Async / đang chờ đợi với sự tự tin.

Sự kết luận

Nếu bạn làm nó ở đây, chúc mừng. Bạn chỉ cần thêm một phần kiến ​​thức quan trọng về JavaScript và cách nó hoạt động với môi trường của nó vào hộp công cụ của bạn.

Đây chắc chắn là một chủ đề khó hiểu, và các dòng không phải lúc nào cũng rõ ràng. Nhưng bây giờ bạn hy vọng có một sự nắm bắt về cách JavaScript hoạt động với mã không đồng bộ trong trình duyệt và nắm bắt mạnh mẽ hơn về cả lời hứa và async / đang chờ đợi.

Nếu bạn thích bài viết này, bạn cũng có thể thích kênh YouTube của tôi. Tôi hiện đang có một loạt các nguyên tắc cơ bản trên web, nơi tôi đi qua HTTP, xây dựng các máy chủ web từ đầu và hơn thế nữa.

Ngoài ra còn có một loạt việc xây dựng toàn bộ ứng dụng với React, nếu đó là mứt của bạn. Và tôi dự định sẽ thêm nhiều nội dung ở đây trong tương lai đi sâu vào các chủ đề JavaScript.

Và nếu bạn muốn nói xin chào hoặc trò chuyện về phát triển web, bạn luôn có thể liên hệ với tôi trên Twitter tại @foseberg. Cảm ơn vì đã đọc!