[英]How can I use fetch in while loop
My code is something like this:我的代码是这样的:
var trueOrFalse = true;
while(trueOrFalse){
fetch('some/address').then(){
if(someCondition){
trueOrFalse = false;
}
}
}
But I can not issue the fetch request.但我无法发出获取请求。 It seems like while loop is schedule many fetches into next tick.似乎 while 循环将许多提取安排到下一个滴答中。 But never skip to next tick.但永远不要跳到下一个滴答声。 How can I solve the problem?我该如何解决这个问题?
while(true)
creates an infinite loop , which will attempt to call fetch
infinitely many times within a single "tick" . while(true)
创建一个无限循环,它将尝试在单个 "tick"内无限次调用fetch
。 Since it never finishes issuing new fetch
calls, it never gets to the next tick.因为它永远不会完成发出新的fetch
调用,所以它永远不会到达下一个滴答声。
This function is very CPU-intensive and will probably lock up the entire page.此函数非常占用 CPU,可能会锁定整个页面。
What's the solution?解决办法是什么?
What you are probably trying to do is keep fetching until the result satisfies some condition.您可能正在尝试做的是继续获取,直到结果满足某些条件。 You can achieve that by checking the condition in the then
callback, and re-issuing the fetch
if it is false
:您可以通过检查then
回调中的条件并在条件为false
时重新发出fetch
来实现:
var resultFound = false; var fetchNow = function() { fetch('some/address').then(function() { if(someCondition) { resultFound = true; } else { fetchNow(); } }); } fetchNow();
This way, instead of这样,而不是
fetch!
fetch!
fetch!
fetch!
...
...the behavior is going to be ...行为将是
fetch!
wait for response
check condition
if false, fetch!
wait for response
check condition
if true, stop.
...which is probably what you expected. ...这可能是您所期望的。
Now with async/await we can use awesome while loops to do cool stuff.现在有了 async/await,我们可以使用很棒的 while 循环来做很酷的事情。
var getStuff = async () => {
var pages = 0;
while(true) {
var res = await fetch(`public/html/${pages ++}.html`);
if(!res.ok) break; //Were done let's stop this thing
var data = await res.text();
//Do something with data
};
console.log("Look ma! I waited!"); //Wont't run till the while is done
};
while
loop is sync
where fetch
is async
in nature, so while
won't wait for fetch
async
operation to complete and going to next iteration immediately. while
循环是sync
的,而fetch
本质上是async
的,因此while
不会等待fetch
async
操作完成并立即进入下一次迭代。
You can achieve this synchronously like following:您可以像下面这样同步实现:
function syncWhile(trueOrFalse){
if(trueOrFalse) {
fetch('some/address').then(){
if(someCondition){
trueOrFalse = false;
}
syncWhile(trueOrFalse);
}
}
}
syncWhile(true);
The while loop fires off all the fetches before any one of them will reach the then()
, so a while loop is incorrect here, even useless I would say. while 循环在其中任何一个到达then()
之前触发所有提取,因此 while 循环在这里是不正确的,我会说甚至是无用的。
You need to make the then()
responsible for whether to continue fetching or not.您需要让then()
负责是否继续获取。
It also seems that your then()
-syntax is wrong (maybe just an error editing the example).您的then()
语法似乎也是错误的(可能只是编辑示例时出错)。 Furthermore you can omit the boolean helper variable (unless perhaps you need it in some other place).此外,您可以省略布尔辅助变量(除非您可能在其他地方需要它)。
function fetchUntilCondition(){
fetch('some/address').then(function(response){
if(!someCondition) {
fetchUntilCondition(); // fetch again
}
});
}
fetchUntilCondition();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.