JavaScript check if a resource is available using fetch

Question

I'm just trying to check if a resource is available from an executing client. I cannot use XHR because the target resource does not allow this.

I am new to JS and now I am working with this (

I expected this code to check the resource, print the result, and then wait a second. Repeat this until 3 attempts are successful or one of them is successful.

Instead, the executable blocks for a while, and then prints all console.logs once, and the resource is never reached (what it is).

I know the fetch operation is asynchronous, but I wondered if I was declaring previously done and implementing a dream that should work. In the worst case, the while loop will use the previously declared done .

How to achieve the described behavior? Any advice is appreciated.

Answer 1

Your sleep function is blocked, what you really want is a recursive function that returns a promise after checking url n times with a delay of y seconds, etc.

Something like that

 function chk(target, times, delay) { return new Promise((res, rej) => { // return a promise (function rec(i) { // recursive IIFE fetch(target, {mode: 'no-cors'}).then((r) => { // fetch the resourse res(r); // resolve promise if success }).catch( err => { if (times === 0) // if number of tries reached return rej(err); // don't try again setTimeout(() => rec(--times), delay ) // otherwise, wait and try }); // again until no more tries })(times); }); } 

Used as

 var t = "https://i.stack.imgur.com/Ya15i.jpg"; chk(t, 3, 1000).then( image => { console.log('success') }).catch( err => { console.log('error') }); 

And note that this is not interrupted by 404 or 500, any response is a successful request.

Answer 2

The chk function returns undefined, you return true / false from callback requests with promises not from the container function.

You must use recursion and timeout in the catch callback. It will be something like this:

 var i = 0; var done = false; var t = "https://i.stack.imgur.com/Ya15i.jpg"; (function chk(target){ console.log("checking "+target) fetch(target, {mode: 'no-cors'}).then(r=>{ done = true; console.log("Reachable!"); }) .catch(e=>{ console.log("Unreachable."); if(i<4){ setTimeout(function(){ chk(target) },1000) } }); })(t) 

Answer 3

You cannot return in the callback. When you do this, the callback is returned, not the parent function. If fact, the chk function never returns anything.

It looks like you intend to do this, return the promise returned with fetch. And try to get three times.

Try the following:

 const numberOfTries =3; currentTry = 1; var t = "https://i.stack.imgur.com/Ya15i.jpg"; chk(t); function tryCheck(resource, currentTry) { chk(resource).done(function(){ console.log("Reachable!"); }).catch(function(e) { console.log("Unreachable."); if (currentTry >= numberOfTries) return; sleep(1000); tryCheck(resource, currentTry + 1); }); } function chk(resource) { console.log("checking "+target); return fetch(target, {mode: 'no-cors'}); } 

Answer 4

The main problem is that you are trying to return from a callback. It's pointless. But fetch is a Promise-based query that you can use Promise to model delays.

Something like this should do the trick

 // promise based delay const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout)) // check if target can be fetched const check = target => fetch(target, {...}) .then(response => response.ok) const ping = (target, times = 3, timeout = 1000) => check(target) .then(found => { if(!found && times) { // still can check // wait then ping one more time return delay(timeout).then(() => ping(target, times - 1, timeout)) } return found }) ping('https://i.stack.imgur.com/Ya15i.jpg') .then(found => { console.log(found ? 'Reachable': 'Unreachable') }) 

Answer 5

Try this, hope it works

 var myHeaders = new Headers(); myHeaders.append('Content-Type', 'image/jpeg'); var myInit = { method: 'GET', headers: myHeaders, mode: 'no-cors', cache: 'default' }; var myRequest = new Request('https://i.stack.imgur.com/Ya15i.jpg'); fetch(myRequest,myInit).then(function(response) { ... });