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]
}
Tô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]
}
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]
}
Trướ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]
}
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]
}
Cá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]
}
let 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]
}
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]
}]
]
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]
}
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]
}
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]
}
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]
}
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]
}
Sẽ 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]
}
const 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]
}
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]
}
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]
}
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]
}]
]