Url cuộc gọi javascript

xiềng xích

Một nhu cầu phổ biến là thực hiện hai hoặc nhiều hoạt động không đồng bộ quay lại, trong đó mỗi hoạt động tiếp theo bắt đầu khi hoạt động trước đó thành công, với kết quả từ bước trước đó. Ngày xưa, thực hiện một số hoạt động không đồng bộ liên tiếp sẽ dẫn đến kim tự tháp gọi lại cổ điển của sự diệt vong

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Với những lời hứa, chúng tôi thực hiện điều này bằng cách tạo một chuỗi lời hứa. Thiết kế API của các lời hứa làm cho điều này trở nên tuyệt vời, bởi vì các cuộc gọi lại được đính kèm với đối tượng lời hứa được trả về, thay vì được chuyển vào một hàm

Đây là điều kỳ diệu. hàm

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Lời hứa thứ hai này (

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Với mẫu này, bạn có thể tạo các chuỗi xử lý dài hơn, trong đó mỗi lời hứa thể hiện việc hoàn thành một bước không đồng bộ trong chuỗi. Ngoài ra, các đối số của

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Thay vào đó, bạn có thể thấy điều này được thể hiện bằng các hàm mũi tên

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Quan trọng. Luôn trả về kết quả, nếu không, các cuộc gọi lại sẽ không bắt được kết quả của lời hứa trước đó (với các chức năng mũi tên,

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Điều này có thể tồi tệ hơn nếu bạn có điều kiện chủng tộc — nếu lời hứa từ trình xử lý cuối cùng không được trả lại, trình xử lý

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Do đó, theo nguyên tắc thông thường, bất cứ khi nào hoạt động của bạn gặp phải một lời hứa, hãy trả lại nó và hoãn việc xử lý nó cho trình xử lý

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

làm tổ

Trong hai ví dụ trên, ví dụ đầu tiên có một chuỗi lời hứa được lồng trong giá trị trả về của một trình xử lý

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Nesting là một cấu trúc điều khiển để giới hạn phạm vi của các câu lệnh

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Lưu ý rằng các bước tùy chọn ở đây được lồng vào nhau — với việc lồng vào nhau không phải do vết lõm, mà do vị trí của dấu ngoặc đơn

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Trình xử lý tắt tiếng lỗi bên trong

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Chuỗi sau khi bắt

Có thể xâu chuỗi sau một thất bại, tôi. e. một

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Điều này sẽ xuất văn bản sau

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Ghi chú. Văn bản "Làm điều này" không được hiển thị vì lỗi "Đã xảy ra lỗi" khiến từ chối

Lỗi thường gặp

Dưới đây là một số lỗi phổ biến cần chú ý khi soạn chuỗi lời hứa. Một số trong những sai lầm này biểu hiện trong ví dụ sau

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Sai lầm đầu tiên là không xâu chuỗi mọi thứ lại với nhau đúng cách. Điều này xảy ra khi chúng tôi tạo một lời hứa mới nhưng quên trả lại nó. Kết quả là chuỗi bị hỏng — hay đúng hơn là chúng ta có hai chuỗi độc lập chạy đua với nhau. Điều này có nghĩa là

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Sai lầm thứ hai là lồng vào nhau một cách không cần thiết, tạo điều kiện cho sai lầm đầu tiên. Việc lồng ghép cũng giới hạn phạm vi của trình xử lý lỗi bên trong, mà—nếu ngoài ý muốn—có thể dẫn đến các lỗi chưa được phát hiện. Một biến thể của điều này là mẫu chống lại hàm tạo lời hứa, kết hợp việc lồng với việc sử dụng dự phòng của hàm tạo lời hứa để bọc mã đã sử dụng lời hứa

Sai lầm thứ ba là quên kết thúc chuỗi với

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Một nguyên tắc nhỏ là luôn trả lại hoặc chấm dứt chuỗi lời hứa và ngay khi bạn nhận được một lời hứa mới, hãy trả lại nó ngay lập tức để làm phẳng mọi thứ

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Lưu ý rằng

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Bây giờ chúng tôi có một chuỗi xác định duy nhất với việc xử lý lỗi thích hợp

Sử dụng

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

xử lý lỗi

Bạn có thể nhớ đã nhìn thấy

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Nếu có ngoại lệ, trình duyệt sẽ tìm xuống chuỗi để tìm trình xử lý

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Sự đối xứng này với mã không đồng bộ lên đến đỉnh điểm trong cú pháp

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Nó được xây dựng dựa trên các lời hứa — ví dụ,

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Lời hứa giải quyết một lỗ hổng cơ bản với kim tự tháp gọi lại của sự diệt vong, bằng cách bắt tất cả các lỗi, thậm chí cả các ngoại lệ bị ném và lỗi lập trình. Điều này là cần thiết cho thành phần chức năng của các hoạt động không đồng bộ

Sự kiện từ chối lời hứa

Nếu một sự kiện từ chối lời hứa không được xử lý bởi bất kỳ trình xử lý nào, nó sẽ nổi lên trên cùng của ngăn xếp cuộc gọi và máy chủ lưu trữ cần hiển thị nó. Trên web, bất cứ khi nào một lời hứa bị từ chối, một trong hai sự kiện sẽ được gửi đến phạm vi toàn cầu (thông thường, đây là

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Được gửi khi một lời hứa bị từ chối nhưng không có sẵn trình xử lý từ chối

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Được gửi khi một trình xử lý được đính kèm với một lời hứa bị từ chối đã gây ra sự kiện

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Trong cả hai trường hợp, sự kiện (thuộc loại

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Những điều này có thể cung cấp khả năng xử lý lỗi dự phòng cho các lời hứa, cũng như giúp gỡ lỗi các vấn đề với quản lý lời hứa của bạn. Các trình xử lý này là toàn cầu theo ngữ cảnh, vì vậy tất cả các lỗi sẽ chuyển đến cùng một trình xử lý sự kiện, bất kể nguồn

trong nút. js, việc xử lý từ chối lời hứa hơi khác một chút. Bạn nắm bắt các từ chối chưa được xử lý bằng cách thêm trình xử lý cho Nút. js sự kiện

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Đối với nút. js, để ngăn lỗi được ghi vào bảng điều khiển (hành động mặc định sẽ xảy ra), việc thêm trình nghe

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Tuy nhiên, nếu bạn thêm trình nghe

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Thành phần

Có bốn công cụ tổng hợp để chạy đồng thời các hoạt động không đồng bộ.

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Chúng ta có thể bắt đầu hoạt động song song và đợi tất cả chúng kết thúc như thế này

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Nếu một trong những lời hứa trong mảng bị từ chối,

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

function successCallback(result) {
  console.log(`Audio file ready at URL: ${result}`);
}

function failureCallback(error) {
  console.error(`Error generating audio file: ${error}`);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

Tất cả các phương thức này đều chạy song song các lời hứa — một chuỗi các lời hứa được bắt đầu đồng thời và không đợi nhau. Thành phần tuần tự có thể sử dụng một số JavaScript thông minh

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

Trong ví dụ này, chúng tôi rút gọn một mảng các hàm không đồng bộ thành một chuỗi lời hứa. Đoạn mã trên tương đương với

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Điều này có thể được tạo thành một chức năng soạn thảo có thể tái sử dụng, phổ biến trong lập trình chức năng

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Hàm

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Bố cục tuần tự cũng có thể được thực hiện ngắn gọn hơn với async/await

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Tuy nhiên, trước khi bạn soạn các lời hứa một cách tuần tự, hãy cân nhắc xem điều đó có thực sự cần thiết hay không — tốt hơn hết là chạy các lời hứa song song để chúng không chặn lẫn nhau một cách không cần thiết trừ khi việc thực hiện một lời hứa phụ thuộc vào kết quả của một lời hứa khác

Tạo một Lời hứa xung quanh API gọi lại cũ

Một

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Trong một thế giới lý tưởng, tất cả các chức năng không đồng bộ sẽ trả về lời hứa. Thật không may, một số API vẫn mong đợi các cuộc gọi lại thành công và/hoặc thất bại được chuyển theo cách cũ. Ví dụ rõ ràng nhất là hàm

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Trộn các cuộc gọi lại và lời hứa kiểu cũ là vấn đề. Nếu

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

May mắn thay, chúng ta có thể gói gọn

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Hàm tạo lời hứa có chức năng thực thi cho phép chúng tôi giải quyết hoặc từ chối lời hứa theo cách thủ công. Vì

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

thời gian

Cuối cùng, chúng ta sẽ xem xét các chi tiết kỹ thuật hơn, về thời điểm cuộc gọi lại đã đăng ký được gọi

bảo lãnh

Trong API dựa trên gọi lại, thời điểm và cách thức gọi lại tùy thuộc vào trình triển khai API. Ví dụ: cuộc gọi lại có thể được gọi đồng bộ hoặc không đồng bộ

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Điều này dẫn đến tình trạng của Zalgo, vì nó làm cho các tác dụng phụ khó phân tích

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Mặt khác, các lời hứa là một dạng đảo ngược quyền kiểm soát - trình triển khai API không kiểm soát thời điểm cuộc gọi lại được gọi. Thay vào đó, công việc duy trì hàng đợi gọi lại và quyết định khi nào gọi các cuộc gọi lại được giao cho việc triển khai lời hứa và cả người dùng API và nhà phát triển API đều tự động nhận được các đảm bảo ngữ nghĩa mạnh mẽ, bao gồm

• Các cuộc gọi lại được thêm bằng

  const promise = doSomething();
  const promise2 = promise.then(successCallback, failureCallback);
  

  6 sẽ không bao giờ được gọi trước khi hoàn thành vòng chạy sự kiện JavaScript hiện tại
• Các cuộc gọi lại này sẽ được gọi ngay cả khi chúng được thêm vào sau thành công hay thất bại của hoạt động không đồng bộ mà lời hứa đại diện
• Nhiều cuộc gọi lại có thể được thêm vào bằng cách gọi

  const promise = doSomething();
  const promise2 = promise.then(successCallback, failureCallback);
  

  6 nhiều lần. Chúng sẽ được gọi lần lượt, theo thứ tự mà chúng được chèn vào

Để tránh bất ngờ, các chức năng được chuyển đến

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Thay vì chạy ngay lập tức, hàm truyền vào được đặt trong hàng đợi vi tác vụ, có nghĩa là nó chạy sau (chỉ sau khi hàm tạo ra nó thoát ra và khi ngăn xếp thực thi JavaScript trống), ngay trước khi quyền điều khiển được trả lại cho sự kiện . e. khá sớm

doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doThirdThing(newResult, function (finalResult) {
      console.log(`Got the final result: ${finalResult}`);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Hàng đợi nhiệm vụ so với vi nhiệm vụ

Các cuộc gọi lại lời hứa được xử lý dưới dạng một tác vụ nhỏ trong khi các cuộc gọi lại

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Đoạn mã trên sẽ xuất ra

const promise = doSomething();
const promise2 = promise.then(successCallback, failureCallback);

Để biết thêm chi tiết, hãy tham khảo Nhiệm vụ so với vi nhiệm vụ

Khi lời hứa và nhiệm vụ xung đột

Nếu bạn gặp phải các tình huống trong đó bạn có các lời hứa và nhiệm vụ (chẳng hạn như các sự kiện hoặc cuộc gọi lại) đang thực hiện theo thứ tự không thể đoán trước, bạn có thể hưởng lợi từ việc sử dụng một vi tác vụ để kiểm tra trạng thái hoặc cân bằng các lời hứa của mình khi các lời hứa được tạo ra một cách có điều kiện

Nếu bạn nghĩ rằng các tác vụ vi mô có thể giúp giải quyết vấn đề này, hãy xem hướng dẫn tác vụ vi mô để tìm hiểu thêm về cách sử dụng

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);