Async let là một phần của khung đồng thời của Swift và cho phép khởi tạo một hằng số không đồng bộ. Khung đồng thời đã giới thiệu khái niệm chờ đợi không đồng bộ, dẫn đến đồng thời có cấu trúc và mã dễ đọc hơn cho các phương thức không đồng bộ
Nếu bạn chưa quen với async-await, trước tiên bạn nên đọc bài viết của tôi Async await trong Swift được giải thích bằng các ví dụ về mã
Tối ưu hóa và xây dựng IAP và đăng ký với Glassfy MIỄN PHÍXây dựng, duy trì và tối ưu hóa IAP và đăng ký của bạn bằng Glassfy. Kiếm nhiều tiền hơn với ứng dụng của bạn bằng cách tối ưu hóa để tăng doanh thu. Được giảm giá 25% cho gói cao cấp hoặc bắt đầu miễn phí. Nói cách khác, bạn chỉ có thể sử dụng khai báo async let on cục bộ trong các phương thức. Các thay đổi đồng thời không chỉ là chờ đợi không đồng bộ và bao gồm nhiều tính năng mới mà bạn có thể hưởng lợi từ mã của mình. Vì vậy, trong khi bạn đang ở đó, tại sao không đi sâu vào các tính năng đồng thời khác? Tối ưu hóa và xây dựng IAP và đăng ký với Glassfy MIỄN PHÍXây dựng, duy trì và tối ưu hóa IAP và đăng ký của bạn bằng Glassfy. Kiếm nhiều tiền hơn với ứng dụng của bạn bằng cách tối ưu hóa để tăng doanh thu. Được giảm giá 25% cho gói cao cấp hoặc bắt đầu miễn phí. Async let cho phép chúng tôi kết hợp nhiều cuộc gọi không đồng bộ và chờ đợi tất cả các kết quả cùng một lúc. Đó là một cách tuyệt vời để tận dụng các tài nguyên hệ thống có sẵn để tải xuống song song trong khi vẫn kết hợp các kết quả khi tất cả các yêu cầu không đồng bộ kết thúc. Kết hợp với async-await và các tác nhân, chúng tạo thành một cách mới mạnh mẽ để xử lý đồng thời trong Swift Nếu bạn muốn tìm hiểu thêm mẹo về Swift, hãy xem trang danh mục Swift. Vui lòng liên hệ với tôi hoặc tweet cho tôi trên Twitter nếu bạn có bất kỳ mẹo hoặc phản hồi nào khác Giả sử chúng ta có một mảng gồm hai phần tử với cả hai phần tử của nó là hai hàm không đồng bộ. Chúng tôi được yêu cầu thực hiện một số công việc, chẳng hạn như in nội dung nào đó lên bảng điều khiển [với mục đích của câu hỏi này] khi việc thực thi cả hai chức năng async hoàn tất Làm thế nào chúng ta có thể tiếp cận thách thức này? Về cơ bản, có hai cách để thực hiện một số tác vụ sau khi hoàn thành một số tác vụ không đồng bộ - Nhưng khi mã bao gồm việc xử lý nhiều [nhiều hơn một] chức năng không đồng bộ thì Lời hứa. tất cả các chức năng của cái trước đều có lợi thế hơn cái sau Lời hứa cực kỳ mạnh mẽ để xử lý các hoạt động không đồng bộ trong JavaScript. Các chức năng không đồng bộ giúp chúng dễ đọc và lý luận hơn. Tuy nhiên, họ cũng giới thiệu một số cạm bẫy lén lút có thể dẫn đến chậm máy nếu chúng ta không cẩn thậnTiếp tục hành trình của bạn đến với Swift Concurrency
Phần kết luận
Hoạt động không đồng bộ thường được sử dụng để tìm nạp dữ liệu, còn được gọi là JavaScript và XML không đồng bộ [AJAX], một kỹ thuật gửi yêu cầu từ một trang web không yêu cầu làm mới trình duyệt. Điều này tương đối phức tạp và liên quan đến API
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
1, nhưng nó thực sự trở nên phổ biến với hàm function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
2 của jQuery, khiến nó trở nên dễ tiếp cận hơntl;dr
Để đảm bảo rằng mã không đồng bộ của bạn không làm chậm ứng dụng của bạn, hãy kiểm tra mã của bạn để đảm bảo rằng
- Nếu bạn đang gọi các hàm không đồng bộ với
3, đừng để các lệnh gọi không đồng bộ không liên quan chặn lẫn nhaufunction getData[] { // the Fetch API returns a Promise fetch['//dog.ceo/api/breeds/image/random'] .then[[response] => { // `.then[]` is called after the request is complete // this is part of the Fetch API for handling JSON-encoded responses return response.json[]; }] .then[[response] => { // We can do whatever we want with the data now! console.log[response]; }]; } getData[];
- Không sử dụng các vòng lặp bên trong
3. Thay vào đó, hãy tạo một mảng Promises vàfunction getData[] { // the Fetch API returns a Promise fetch['//dog.ceo/api/breeds/image/random'] .then[[response] => { // `.then[]` is called after the request is complete // this is part of the Fetch API for handling JSON-encoded responses return response.json[]; }] .then[[response] => { // We can do whatever we want with the data now! console.log[response]; }]; } getData[];
5function getData[] { // the Fetch API returns a Promise fetch['//dog.ceo/api/breeds/image/random'] .then[[response] => { // `.then[]` is called after the request is complete // this is part of the Fetch API for handling JSON-encoded responses return response.json[]; }] .then[[response] => { // We can do whatever we want with the data now! console.log[response]; }]; } getData[];
Bài viết này sẽ hướng dẫn một số ví dụ và cách chúng có thể được cấu trúc lại để tránh chặn thực thi khi sử dụng
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3Lời hứa là một công cụ tuyệt vời, mạnh mẽ
Khi gửi yêu cầu tải dữ liệu của bên thứ ba hoặc thực hiện công việc không đồng bộ khác, việc sử dụng
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
7 đã trở thành một mẫu phổ biến để yêu cầu mã của chúng tôi đợi cho đến khi công việc không đồng bộ hoàn tất trước khi tiếp tụcChúng ta có thể thấy điều này thực tế bằng cách viết một hàm mô phỏng kết nối mạng chậm. khi hàm được gọi, nó sẽ đợi 1 giây trước khi giải quyết [đó là biệt ngữ Promise cho “công việc không đồng bộ đã hoàn tất”]
// -------------------------------------------------------------------
// this function simulates a request that needs to run async
// -------------------------------------------------------------------
function getFakeData[] {
return new Promise[[resolve] => {
setTimeout[[] => {
resolve[{ action: 'boop' }];
}, 1000];
}];
}
// -------------------------------------------------------------------
// this is the code that actually loads data
// -------------------------------------------------------------------
getFakeData[].then[[response] => {
console.log[response.action];
//=> boop
}];
Đây là một bài viết theo mã
Tất cả các mẫu mã trong bài viết này có thể được chạy trong bảng điều khiển của bạn. Để xem những điều này đang hoạt động, hãy mở các công cụ dành cho nhà phát triển [
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
8], sao chép, dán mẫu mã vào bảng điều khiển và nhấn enterTất cả các ví dụ mã trong bài đăng này có thể được chạy trong devtools của trình duyệt của bạnNếu bạn không muốn sử dụng bảng điều khiển của mình, bạn cũng có thể sử dụng CodePen hoặc tạo tệp JavaScript trong trình chỉnh sửa yêu thích của mình để chạy trong trình duyệt của mình
Hứa hẹn cung cấp năng lượng cho nhiều quy trình tìm nạp dữ liệu của chúng tôi
Một trong những cách phổ biến nhất mà chúng tôi làm việc với Promise là khi tải dữ liệu bằng Fetch API hoặc thư viện như Axios. Ví dụ: nếu chúng tôi muốn tải một hình ảnh con chó ngẫu nhiên từ Dog CEO, mã của chúng tôi có thể sử dụng API Tìm nạp [và Lời hứa] như thế này
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
Fetch gửi yêu cầu tới Dog CEO REST API và chờ phản hồi. Khi phản hồi quay lại, nó sẽ giải quyết một Lời hứa với dữ liệu quay lại. Nó cung cấp các trình trợ giúp để xử lý các loại phản hồi khác nhau [trong trường hợp này là JSON], được gọi trong
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
9 và sau thời điểm đó, chúng tôi có thể làm bất cứ điều gì mình muốn với dữ liệu bằng cách xâu chuỗi các lệnh gọi bổ sung function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
9Lời hứa không trả lại giá trị để sử dụng bên ngoài chính chúng
Khi tôi bắt đầu học về Promise, tôi đã phải vật lộn với suy nghĩ rằng không có cách nào đơn giản để lấy dữ liệu từ Promise;
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3Lập luận có lý. Các lời hứa không đồng bộ, nhưng chúng không nên chặn mã đồng bộ không phụ thuộc vào chúng, vì vậy mã không đồng bộ phải được tách biệt
Tuy nhiên, việc cố gắng “nghĩ theo lời hứa” khiến tôi rất đau đầu. Tôi luôn mất một phút để đưa bộ não của mình vào chế độ phù hợp để viết mã dựa trên Promise
Lời hứa lồng nhau khó theo dõi
Nếu nội dung của chúng tôi có nhiều bước không đồng bộ, thì việc lồng trong Lời hứa có thể trở nên khó theo dõi
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
4Bởi vì các bước tiếp theo phải xảy ra bên trong một
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
32, mỗi hành động không đồng bộ sẽ lồng mã của chúng tôi vào, điều này làm tăng thêm chi phí nhận thức và có thể khiến mã khó cấu trúc lại và duy trì theo thời gianĐứng lên. Có nhiều cách để giải quyết vấn đề này, chẳng hạn như đưa các chức năng được chuyển đến
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
9 vào phạm vi cấp cao nhất và gọi chúng là function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
34 — bài viết này sẽ không đề cập đến quy trình đó, nhưng nó có thể là một cách tiếp cận rất hiệu quảCác chức năng không đồng bộ giúp Promise dễ sử dụng hơn…
Để làm cho Promise dễ làm việc hơn, các hàm async giới thiệu các từ khóa
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
35 và function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3 cho phép chúng tôi nhận được các lợi ích của Promise — chờ một async all hoàn tất trước khi tiếp tục — mà không cần tốn công sức cho việc xâu chuỗi các cuộc gọi function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
9 và lồng các PromiseHãy tái cấu trúc mã mà chúng ta đã viết cho đến giờ trong bài viết này bằng cách sử dụng các hàm async để dễ đọc hơn một chút
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
1function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3 yêu cầu mã của chúng tôi đợi Promise giải quyết, sau đó trả lại giá trị đã giải quyết của Promise làm giá trị trả về. Điều này loại bỏ rất nhiều bản tóm tắt liên quan đến Lời hứa và đó là một điều tốt ™…nhưng các chức năng không đồng bộ cũng đưa ra những thách thức mới
Thật không may, sự tiện lợi của các chức năng không đồng bộ đi kèm với một số bẫy không rõ ràng ngay lập tức
Hãy xem xét hai ví dụ
- Hai hoạt động không đồng bộ không liên quan tải dữ liệu, sau đó thực hiện những việc riêng biệt
- Một chuỗi không đồng bộ. một thao tác tải một mảng, sau đó là một loạt lệnh gọi phụ thuộc vào kết quả của lệnh gọi ban đầu
Hai hoạt động không đồng bộ không liên quan
Với Promise, chúng tôi có thể thiết lập điều này như vậy
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3Nếu bạn chạy cái này trong bảng điều khiển của mình, bạn sẽ thấy Điều 1 và Điều 2 hoàn thành gần như cùng một lúc
Nếu chúng tôi cấu trúc lại để sử dụng các chức năng không đồng bộ, mã của chúng tôi có thể trông như thế này
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
4Cái này trông đẹp và sạch sẽ, nhưng nếu chúng tôi chạy nó trong bảng điều khiển của mình, chúng tôi sẽ nhận thấy sự cố. mã bây giờ mất gấp đôi thời gian để chạy. 😱
Các lời hứa chạy song song vì chúng không quan tâm đến những gì xảy ra bên ngoài chúng — đó là lý do tại sao chúng tôi chỉ có thể truy cập nội dung của chúng bên trong một
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
9. Điều này có nghĩa là cả function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
40 và function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
41 đều chạy cùng lúc trong ví dụ đầu tiên của chúng tôiTrong các chức năng không đồng bộ,
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3 chặn bất kỳ mã nào không được thực thi cho đến khi Lời hứa được giải quyết, điều đó có nghĩa là mã được tái cấu trúc của chúng tôi thậm chí không bắt đầu function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
41 cho đến khi function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
40 hoàn thành — điều đó không tốtCó một tin tốt, mặc dù. chúng tôi có thể khắc phục điều này mà không từ bỏ lợi ích của các chức năng không đồng bộ
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
1Bởi vì các hàm async là các Promise ẩn bên trong, nên chúng ta có thể chạy song song cả
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
40 và function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
41 bằng cách gọi chúng mà không cần function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3. Sau đó, chúng ta có thể sử dụng function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
3 và function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
49, trả về một mảng kết quả sau khi tất cả các Lời hứa đã hoàn thànhĐiều này cho phép các Lời hứa chạy song song một lần nữa, nhưng vẫn cung cấp cho chúng tôi một cú pháp dễ sử dụng để tránh xâu chuỗi và cho phép chúng tôi coi các giá trị trong Lời hứa của mình là các giá trị trả về tiêu chuẩn
Hoạt động không đồng bộ với các phụ thuộc
Trong một số trường hợp, chúng tôi sẽ có các hoạt động không đồng bộ phụ thuộc vào kết quả của các hoạt động không đồng bộ trước đó. Ví dụ: nếu chúng tôi muốn tải danh sách các bài đăng trên blog từ một điểm cuối API, thì hãy tải dữ liệu nhận xét cho từng bài đăng trên blog từ một điểm cuối khác
Với Promises, thiết lập đó có thể trông như thế này
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
7Mã này là hoàn toàn tốt. Tuy nhiên, việc lồng nhau ở đây khá sâu và có một chút khó khăn để theo dõi nơi mọi thứ đang diễn ra — chúng tôi có các lệnh gọi lại trong các vòng lặp trong các lệnh gọi lại
Để làm sạch điều này, bản năng đầu tiên của chúng tôi có thể là cấu trúc lại mã này để sử dụng các hàm không đồng bộ
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
8sạch sẽ hơn rất nhiều. 😍
Thật không may, mỗi yêu cầu nhận xét hiện phải đợi một yêu cầu trước khi hoàn thành, nghĩa là mã của chúng tôi hiện chậm hơn đáng kể — và nó sẽ chỉ trở nên tồi tệ hơn khi chúng tôi thêm nhiều bài đăng hơn
Để giải quyết vấn đề này, chúng ta có thể sử dụng
function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
10 thay vì vòng lặp for và tạo một mảng các Lời hứa, sau đó sử dụng function getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
49 để đợi chúng hoàn thànhfunction getData[] {
// the Fetch API returns a Promise
fetch['//dog.ceo/api/breeds/image/random']
.then[[response] => {
// `.then[]` is called after the request is complete
// this is part of the Fetch API for handling JSON-encoded responses
return response.json[];
}]
.then[[response] => {
// We can do whatever we want with the data now!
console.log[response];
}];
}
getData[];
0Mã này vẫn dễ đọc hơn nhiều so với các vòng lặp Promise và vòng lặp lồng nhau, đồng thời nó cho phép các yêu cầu tải nhận xét diễn ra song song
Giữ các chức năng không đồng bộ nhanh
Đây chỉ là một tối ưu hóa cần ghi nhớ khi viết mã không đồng bộ. Nhét nó vào bộ công cụ của bạn và giữ cho các chức năng không đồng bộ của bạn hoạt động nhanh