Cách trả về kết quả của một hàm không đồng bộ trong JavaScript

Tìm hiểu cách trả về kết quả của một hàm không đồng bộ, dựa trên lời hứa hoặc dựa trên lệnh gọi lại, sử dụng JavaScript

Giả sử bạn gặp sự cố này: bạn đang thực hiện một cuộc gọi không đồng bộ và bạn cần trả về kết quả của cuộc gọi đó từ hàm ban đầu.

Như thế này:

const mainFunction = () => {
  const result = asynchronousFunction()
  return result
}

nhưngasynchronousFunction()thực hiện một số lệnh gọi không đồng bộ trong đó (ví dụ:fetch()gọi), và không thể trả về trực tiếp giá trị kết quả. Có lẽ bên trong nó có một lời hứa mà nó cần phải chờ đợi, hoặc một cuộc gọi lại. Như thế này:

const asynchronousFunction = () => {
  return fetch('./file.json').then(response => {
    return response
  })
}

Bạn có thể làm gì thay thế?

Async / await là giải pháp đơn giản nhất. Bạn sử dụngawaittừ khóa thay vì phương pháp tiếp cận dựa trên lời hứa, giống như phương pháp chúng tôi đã sử dụng trước đây:

const asynchronousFunction = async () => {
  const response = await fetch('./file.json')
  return response
}

Trong trường hợp này trongmainFunctionchúng tôi cần thêm không đồng bộ vào chữ ký hàm và chờ trước khi chúng tôi gọiasynchronousFunction():

const mainFunction = async () => {
  const result = await asynchronousFunction()
  return result
}

Bây giờ điều này trả về một lời hứa, bởi vì nó là một hàm không đồng bộ:

mainFunction() //returns a Promise

Vì vậy, để lấy lại kết quả, bạn có thể bọc nó trong một IIFE như thế này:

(async () => {
  console.log(await mainFunction())
})()

Mật mãnhìnnhư mã đồng bộ mà bạn quen dùng từ các ngôn ngữ khác, nhưng nó hoàn toàn không đồng bộ.

Một cách tiếp cận khác là sử dụng các lệnh gọi lại. Nhưng trong khi với async / await, chúng tôi chỉ có thể thay đổiasynchronousFunction()mã, trong trường hợp này chúng ta phải

  1. sửa đổiasynchronousFunction()
  2. sửa đổimainFunction()
  3. cũng sửa đổi mã gọi điện

Đây là một ví dụ.asynchronousFunction()nhận một hàm mới dưới dạng tham số, chúng tôi gọicallback. Nó gọi nó đi quaresponsevật:

const asynchronousFunction = callback => {
  return fetch('./file.json').then(response => {
    callback(response)
  })
}

Chức năng này được thông qua bởimainFunction:

const mainFunction = () => {
  const callback = result => {
    console.log(result)
  }

asynchronousFunction(callback) }

Phần cuối cùng của câu đố nằm trong hàm gọimainFunction. Vì chúng tôi không thể trả lại phản hồi trực tiếp từmainFunction, bởi vì chúng tôi nhận được điều đó một cách không đồng bộ, hàm gọi phải thay đổi cách nó xử lý nó.

Vì vậy, thay vìconst result = mainFunction(), chúng tôi có thể sử dụng

const callbackFunction = result => {
  console.log(result)
}

const mainFunction = callback => { asynchronousFunction(callback) }

//call the code mainFunction(callbackFunction)

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: