javascript - 已解决 : how can i break a for loop based on a response from promise?

Question

所以我正在编写一个脚本来在站点上自动为我执行一些操作。到目前为止，我已经解决了所有问题，但我做错了一些事情，只是想找出更好的方法。

我有一个 for 循环，它将通过提取将请求发送到 API。循环次数将基于一个变量。我希望能够在每次提取时处理它们的响应，如果它们中的任何一个以 true 的结果出现，我希望它停止我的 for 循环继续。目前我的工作方式是刷新页面(这将停止我的循环)但这是非常低效的。我只需要以某种方式完成它。

至于同步/异步，我希望它发送请求而不考虑响应，直到响应为真，然后我希望它停止发送请求。如果我有一些请求是可以的，这就是我的页面刷新方法现在发生的情况。

我乐于接受建议并改进整个事情(我只是边走边学，甚至不知道 2 个月前的 js 是什么。但是对于我已经想出如何做的所有事情，我似乎无法掌握这个概念。)

我已经尝试命名循环并中断@name，尝试返回中断，但我尝试过的任何事情都没有成功。唯一有的是页面刷新，我猜这是停止循环的一种方法。

var reqs = 5000;
xId = 970;
xSym = mySymbol;

var looper = async function () {
  for (var start = 1; start < reqs; start++) {
    await new Promise(resolve => { 
        setTimeout(function () { 

            //This is essentially what I need to loop over and over.
            //but not any faster then 200 ms per request. 

            fetch("https://example.com/api/send", {"credentials":"include","body":`{\"xactionId\":\"${xId}\",\"symbol\":\"${xSym}\"}`,"method":"POST","mode":"cors"})
            .then(resp => resp.json())
            .then(json => {
            if(json.test.result === true) { 
                console.log(json.test.hash, json.test.number); 
                    //  
                    //This is where I want to be able to stop the loop
                    //If any of the completed results 
                    //come back true to have it discontinue the Looper
                    //
                    //currently I do a window.location.reload();
                    //  
            }})
            .catch(err => console.log(err));

            resolve(true);
          }, 200);
    });
  }
  return true;
}
looper().then(function(){
  console.log("Got a match!");
});

以防万一有人需要我从服务器返回的响应。

{
  "result": {
    "hash": "dbbb42b293",
    "result": false,
    "isHigh": false,
    "number": 4993,
    "threshold": 3,
    "chance": 0.03,
    "nonce": 2194375,
    "created": 1554150935
  },
  "dailyFree": false,
  "status": null,
  "user": {
    "hash": "aabbccdd8f",
    "level": 300,
    "username": "user",
    "requests": 4440936,
    "nonce": 2194376,
    "volume": "11.10794076",
    "lockedBalance": null,
    "session": {
      "requests": 5,
      "volume": "0.000004"
    }
  }
}

我希望能够在基于第二个 .then 获取 POST 请求后的结果的循环异步函数中停止 for 循环。

此外，我想知道上述是否可行，同时在其自己的外部函数中也有获取请求，以便我也可以从代码中的其他地方调用它。

---

解决方案:我使用了@Bergi 建议的最后一个选项。感谢您的帮助!

我的最终代码如下所示:

var reqs = 5000;
xId = 970;
xSym = mySymbol;
function delay(t) {
    return new Promise(resolve => setTimeout(resolve, t));
}
async function looper() {
  var run = true;
  for (var start = 1; run && start < reqs; start++) {
    await delay(200);
    fetch("https://example.com/api/send", {"credentials":"include","body":`{\"xactionId\":\"${xId}\",\"symbol\":\"${xSym}\"}`,"method":"POST","mode":"cors"})
    .then(resp => resp.json())
    .then(json => {
      if (json.test.result === true) { 
        console.log(json.test.hash, json.test.number); 
        run = false;
      }
    });
  }
  return true;
}
looper().then(function(){
  console.log("DONE!")
});

Answer 1

避免 Promise constructor antipattern !你应该使用

function delay(t) {
    return new Promise(resolve => setTimeout(resolve, t));
}

并且不要在其他地方使用 Promise 构造函数，尤其是环绕其他 promise 调用。我猜你在找

async function looper() {
  for (var start = 1; start < reqs; start++) {
    await delay(200);
    const resp = await fetch("https://example.com/api/send", {"credentials":"include","body":`{\"xactionId\":\"${xId}\",\"symbol\":\"${xSym}\"}`,"method":"POST","mode":"cors"});
    const json = await resp.json();
    if (json.test.result === true) { 
      console.log(json.test.hash, json.test.number); 
      break;
//    ^^^^^
    }
  }
  return true;
}

或者让 delay(200) 和 fetch 并行运行，这样您至少要等待 200 毫秒，而不是在 fetch 花费的时间之外:

async function looper() {
  for (var start = 1; start < reqs; start++) {
    const [, json] = await Promise.all([
      await delay(200),
      fetch("https://example.com/api/send", {"credentials":"include","body":`{\"xactionId\":\"${xId}\",\"symbol\":\"${xSym}\"}`,"method":"POST","mode":"cors"}).then(resp => resp.json()),
    ]);
    if (json.test.result === true) { 
      console.log(json.test.hash, json.test.number); 
      break;
//    ^^^^^
    }
  }
  return true;
}

如果你真的wanted to fire off每 200 毫秒获取一个请求，您不能在此处使用 await。您必须在循环条件中使用 bool 变量来检查是否有任何已收到的响应希望循环停止:

async function looper() {
  var run = true;
  for (var start = 1; run && start < reqs; start++) {
//                    ^^^^^^
    await delay(200);
    fetch("https://example.com/api/send", {"credentials":"include","body":`{\"xactionId\":\"${xId}\",\"symbol\":\"${xSym}\"}`,"method":"POST","mode":"cors"})
    .then(resp => resp.json())
    .then(json => {
      if (json.test.result === true) { 
        console.log(json.test.hash, json.test.number); 
        run = false;
//      ^^^^^^^^^^^^
      }
    })
    .catch(err => console.log(err));
  }
  return true;
}