Gọi api trong vòng lặp javascript

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]
}
3

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

Bồ tát Srivastava

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

  • Facebook
  • Twitter

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ắng

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]
}
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ày

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]
}
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ạn

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]
}
2

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]
}
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 theo

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]
}
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ết

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 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]
}
7

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]
}
6

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]
}
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

Bạn có thể thực hiện lệnh gọi API trong vòng lặp for không?

vòng lặp for 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 theo .

Làm cách nào chúng ta có thể gọi API trong JavaScript?

Gọi API web bằng JavaScript .
Định cấu hình ứng dụng để phân phát các tệp tĩnh và bật ánh xạ tệp mặc định. .
Tạo một thư mục wwwroot trong thư mục gốc của dự án
Tạo một thư mục css bên trong thư mục wwwroot
Tạo một thư mục js bên trong thư mục wwwroot
Thêm một tệp HTML có tên là chỉ mục. html vào thư mục wwwroot

Làm cách nào để gọi API trong vòng lặp trong Android?

Gọi addAll[] ở dòng cuối cùng của phương thức phản hồi yêu cầu api của bạn. Và clearAll[] khi bắt đầu vòng lặp for .

Làm cách nào tôi có thể gọi API trực tiếp?

Cách thực hiện lệnh gọi API .
Tìm URI của máy chủ hoặc chương trình bên ngoài
Thêm một động từ HTTP
Bao gồm một tiêu đề
Bao gồm khóa API hoặc mã thông báo truy cập
Chờ phản hồi

Chủ Đề