如何同步Fire存储在数组中的URI

问题描述 投票:0回答:1

one.tsx

function fnOne() {
    var urlMap = new Map();
    urlMap.put ("1", 
        ["https://thetestrequest.com/comments/1", 
        "https://thetestrequest.com/comments/2", ... 100 length])   
    urlMap.put ("2", 
        ["https://thetestrequest.com/comments/4", 
        "https://thetestrequest.com/comments/5", ... 15 length"])
        
    urlMap.forEach((key: any, value: any) => {
        console.log(key + " Loop");
        const commentsXML : any = fnTwo (value);
        commentsXML.then((ResponseArray: any) => {
            console.log(key + " ResponseArray");
            console.log(ResponseArray);
        });
    });
}

function fnTwo (value: any) {
    console.log ("Inside fnTwo");
    
    var d1 = fetch (value)
            .then (response => response.text())
            .then (data => {
                console.log ("Return response.text: " + new Date() + data);
                return data;
            })
            .catch((error) => console.error("ERROR in fetch " + error));
    return d1;  
}

urlMap 的 GET 与 2 次迭代同步发生时的预期控制台输出:

  • 1 个循环
  • fnTwo 内部
  • 获取 100 个元素 urlMap[0]
  • 返回响应.文本:12:00:02 100 个元素的 IST xml 响应
  • 1 响应数组
  • 100 个元素的 XML 响应
  • 2 循环
  • fnTwo 内部
  • 获取 15 个元素的 urlMap[1]
  • 返回响应.文本:12:00:04 15 个元素的 IST xml 响应
  • 2 响应数组
  • 15 个元素的 XML 响应

控制台中的实际输出是:

  • 1 个循环
  • fnTwo 内部
  • 2 循环
  • fnTwo 内部
  • 获取 100 个元素 urlMap[0](响应日期为 12:00:02)。 3000 毫秒响应时间。
  • 获取 15 个元素 urlMap[1](响应日期为 12:00:01)。 700 毫秒响应时间。
  • 返回响应.文本:12:00:02 100 个元素的 IST xml 响应
  • 1 响应数组
  • 100 个元素的 XML 响应
  • 返回响应.文本:12:00:04 15 个元素的 IST xml 响应
  • 2 响应数组
  • 15 个元素的 XML 响应

请注意,15 个元素的响应时间戳早于 100 个元素的响应时间戳。因此查询不会同步触发。

如何同步发送请求。也就是说,收到 urlMap[0] 的响应后,将发送 urlMap[0] 的请求。

reactjs typescript async-await fetch synchronous
1个回答
0
投票

发生您的问题是因为 forEach 的设计不是为了等待其循环中进行的任何异步调用。因此,它正在获取第一个元素,然后继续其工作,然后传递到第二个循环,而不检查第一个获取调用是否完成。 在您的情况下,您想使用 for of 循环。 您还应该将“.then”转换为 async/await,这使其更具可读性并且更容易管理异步调用。

function async fnOne() { // make the function async
    for (const [key, value] of urlMap) {
       console.log(key + " Loop");
       const commentsXML = await fnTwo(value); // await for the fetch to finish
       console.log(key + " ResponseArray");
       console.log(ResponseArray);
    }
}

您也有类似的问题,您也可以阅读以下内容以了解更多详细信息: 在 forEach 循环中使用 async/await

© www.soinside.com 2019 - 2024. All rights reserved.