Tôi chưa quen với các lệnh gọi API và Postman, đồng thời tôi đang bắt đầu đọc thêm về các tập lệnh yêu cầu trước và không thể tìm ra cách lặp qua một dữ liệu nhất định và lưu các phản hồi vào máy cục bộ
Tôi có một yêu cầu nhận nói,
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
3Tôi muốn trích xuất dữ liệu từ 01-01-2021 đến 30-05-2022 [hôm nay] và lưu phản hồi [dữ liệu được trả về dưới dạng phản hồi]. Tôi không thể yêu cầu máy chủ cung cấp dữ liệu đầy đủ cùng một lúc vì có rất nhiều dữ liệu
Vì vậy, tôi muốn viết một yêu cầu GET và chạy nó trong một vòng lặp trong khoảng thời gian 10 ngày kể từ ngày 01-01-2021
Có thể có một cơ hội mà bạn muốn giải quyết một tình huống liên quan đến việc thực hiện các cuộc gọi api trong một vòng lặp
Ngày 3 tháng 8 năm 2021 - 10. 38 Đã cập nhật. Ngày 3 tháng 8 năm 2021 - 11. 37
0 1071
Xin chào, trong bài đăng trên blog này, chúng ta sẽ thảo luận về cách thực hiện lặp đi lặp lại các hoạt động không đồng bộ trong JavaScript
Là một nhà phát triển giao diện người dùng, có thể có những tình huống mà bạn muốn thực hiện các cuộc gọi api liên tục như xóa nhiều người dùng cùng một lúc hoặc bất kỳ loại thao tác nào khác tại một thời điểm chỉ bằng một lần nhấp vào nút. Để thực hiện thao tác này, bạn có thể có nhiều cách tiếp cận. g. theo cách đệ quy hoặc vòng lặp
Và chúng ta có thể tận dụng mẫu Async/Await. Cơ bản
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
4 và const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
5 rất đơn giản. Mọi thứ trở nên phức tạp hơn khi bạn sử dụng vòng lặp để thực hiện các thao tác không đồng bộ trong phần thân. Vòng lặp bình thường cùng với các cuộc gọi api của bạn sẽ không hoạt động vì nó được đồng bộ hóa. Tác vụ không đồng bộ của bạn đã được đồng bộ hóa, vòng lặp sẽ kết thúc trước khi tác vụ không đồng bộ có thể phản hồi. Vì vậy, chúng ta cần sử dụng Promise để quản lý các tác vụ không đồng bộ. Hứa hẹn quản lý trạng thái các hoạt động không đồng bộ. Trong các ngôn ngữ như Java hoặc Python, đây không phải là điều bạn cần lo lắngTrước khi bạn bắt đầu, bài đăng trên blog này giả định rằng bạn biết cách sử dụng
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
4 và const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
5. Nếu bạn không biết về nó, tôi khuyên bạn nên kiểm tra cái nàyCách tiếp cận 1. sử dụng cho. của vòng lặp
Chúng tôi sẽ sử dụng vòng lặp
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
8 và sử dụng hàm tạo để duy trì trạng thái đã hoàn thành. Đây là một ví dụ đơn giản trong đó vòng lặp for sẽ đợi hàm async cho đến khi chúng ta có 5 lần lặp và sau đó done được chuyển thành true. Bạn sẽ có thể cập nhật khái niệm này để đặt biến done thành true khi lệnh gọi dịch vụ web của bạn đã lưu vào bộ đệm tất cả các hàng dữ liệu của bạnlet done = false;
let count = 0;
const whileGenerator = function* [] {
while [!done] {
yield count;
}
};
const asyncFunction = async [] => {
await new Promise[resolve => {
setTimeout[resolve]; // your API call goes here...
}];
};
const main = new Promise[async [resolve] => {
for [let i of whileGenerator[]] {
console.log[i];
await asyncFunction[];
count++;
if [count === 5] { // check for your condition
done = true;
}
}
resolve[];
}];
main.then[[] => {
console.log['all done!'];
}];
Cách tiếp cận 2. Sử dụng đệ quy
Bạn có thể sử dụng một lời hứa để kiểm soát luồng ứng dụng của mình và sử dụng đệ quy thay vì vòng lặp for of
Giả sử mỗi yêu cầu API tùy ý mất chính xác 100 mili giây, tổng thời gian để lấy chi tiết của bốn mục việc cần làm sẽ phải lớn hơn 400 mili giây nếu chúng ta sử dụng bất kỳ vòng lặp nào nêu trên
Thời gian thực hiện này có thể giảm đáng kể bằng cách sử dụng
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
2const todoIdList = [1, 2, 3, 4]
await Promise.all[
todoIdList.map[async [id] => {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}]
]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thêm bộ hẹn giờ
const todoIdList = [1, 2, 3, 4]
console.time['for {}'];
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
console.timeEnd['for {}'];
console.time['.map[]'];
await Promise.all[
todoIdList.map[async [id] => {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}]
]
console.timeEnd['.map[]'];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nguyên nhân
cho vòng lặp
Vòng lặp
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
9 chỉ chuyển sang lần lặp tiếp theo sau khi hoàn thành việc thực thi toàn bộ khối. Trong trường hợp trên, chỉ sau khi cả hai lời hứa [chờ đợi] được giải quyết, vòng lặp for sẽ chuyển sang lần lặp tiếp theo và thực hiện lệnh gọi API cho mục việc cần làm tiếp theobản đồ[]
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
2 chuyển sang mục tiếp theo ngay sau khi lời hứa được đáp lại. Nó không đợi cho đến khi lời hứa được giải quyết. Trong kịch bản trên,. map[] không đợi cho đến khi phản hồi cho các mục việc cần làm đến từ máy chủ. Nó thực hiện lần lượt tất cả các lệnh gọi API và với mỗi lệnh gọi API mà nó thực hiện, một lời hứa tương ứng sẽ được trả về. const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
5 đợi cho đến khi tất cả những lời hứa này được giải quyếtconst todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
6 là đường cú pháp cho const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
7Sẽ rõ ràng hơn nếu cùng một mã được viết mà không có
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
6const todoIdList = [1, 2, 3, 4]
console.time['.map[]']
Promise.all[
todoIdList.map[id => {
return new Promise[[resolve] => {
fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
.then[response => {
return new Promise[[] => {
response.json[]
.then[todo => {
console.log[todo.title]
resolve[]
}]
}]
}]
}]
}]
]
.then[[] => {
console.timeEnd['.map[]'];
}]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Không thể bắt chước mã tương ứng cho vòng lặp
const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
9 bằng cách thay thế const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
6 bằng const todoIdList = [1, 2, 3, 4]
for [const id of todoIdList] {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}
7 bởi vì, điều khiển kích hoạt lần lặp tiếp theo sẽ phải được ghi trong khối const todoIdList = [1, 2, 3, 4]
await Promise.all[
todoIdList.map[async [id] => {
const response = await fetch[`//jsonplaceholder.typicode.com/todos/${id}`]
const todo = await response.json[]
console.log[todo.title]
}]
]
2. Đoạn mã này sẽ phải được tạo trong công cụ JS