Javascript fetch doesn't return despite correct URL

Question

I've used JQuery in the past to do AJAX requests. I am trying to now use fetch and I am struggling.

My code is very simple, and it calls a C# backend. The back end break point is hit, so I don't believe there is any issue with the URL

this.get = function (url) {
    return getData(url);
};

async function getData(url = '') {
    const response = await fetch(url, {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'same-origin', // no-cors, *cors, same-origin
        cache: 'no-cache', 
        credentials: 'same-origin', 
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow', 
        referrerPolicy: 'no-referrer'      
    });

    return await response.json(); // BREAK POINT NEVER HIT
}

In the browsers dev tools, I put a break point at the line const response = await fetch(url, { and another on the return await response.json;

The first break is hit. The second never hits. I don't see any error message or exception.

How do I find out what is going on?

Looking at the response, it shows it's pending a promise

EDIT

It seems as if my program is not waiting with await... My understanding is the code should not progress until it has received (waited) for a response. What is happening is, as soon as it hits the await, it seems to exit the function. The breakpoint on return await response.json() does eventually get hit, but await is acting like a new thread.

What if you point it at a URL which isn't your own backend? mocky.io — evolutionxbox
– evolutionxbox, Commented May 31, 2020 at 15:57

japrescott · Accepted Answer · 2020-05-31 16:05:40Z

2

response.json() returns a promise, not the content. So you will need to return await response.json()

Also, your server should return the data with the content-type being set to 'Content-Type': 'application/json'

answered May 31, 2020 at 16:05

japrescott

5,0633 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MyDaftQuestions Over a year ago

Sadly, even with this change, it still never hits the "return" line's breakpoint :(

evolutionxbox Over a year ago

@MyDaftQuestions May you share any logs from the fetch output?

ABGR · Accepted Answer · 2020-05-31 18:38:29Z

1

Well I do get a response when a try with a mock url: http://jsfiddle.net/0zavw15j/

getData('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
async function getData(url = '') {
const response = await fetch(url, {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    cache: 'no-cache', 
    headers: {
        'Content-Type': 'application/json'
    },
    redirect: 'follow', 
    referrerPolicy: 'no-referrer'      
});
   let commits = await response.json(); // read response body and parse as JSON

alert(commits);// <---- this is hitting
}

edited May 31, 2020 at 18:38

answered May 31, 2020 at 17:54

ABGR

5,2634 gold badges34 silver badges56 bronze badges

5 Comments

MyDaftQuestions Over a year ago

Yours is slightly different I think. I have an await in the response. So, try alert(await response.json()); It does not hit

ABGR Over a year ago

Actually this mock url I was using was returning a promise do I had to comment that out.

MyDaftQuestions Over a year ago

I copied and pasted this into my site. It still doesn't hit the break point so I guess something very odd is going on with my machine......When I look at the return object though, it always shows Promise<pending>

ABGR Over a year ago

@MyDaftQuestions yeah Promise<pending> is because of this mock url not correctly giving a response properly. You may try with a different url

ABGR Over a year ago

can you put your await in a variable and return that just like I have done? let commits = await response.json(); return commits

ehab · Accepted Answer · 2020-05-31 16:00:22Z

Usually when there is no response (either 200 as positive or any error status code like 404, 500), this means that there was no response at all. Happens sometimes because request goes in an infinite loop of redirects or really long loop of redirects.

I suggest trying request without redirect set to "follow", like this

async function getData(url = '') {
    const response = await fetch(url, {
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'same-origin', // no-cors, *cors, same-origin
        cache: 'no-cache', 
        credentials: 'same-origin', 
        headers: {
            'Content-Type': 'application/json'
        },
        referrerPolicy: 'no-referrer'      
    });

    return response.json(); // BREAK POINT NEVER HIT
}

MyDaftQuestions · Accepted Answer · 2020-06-01 19:29:55Z

0

The issue was, I returning a promise, so everything was not synchronous...

As soon as I changed it to

async function getData (url = '', successCallback){
    ….
    success(await response.json());
}

it worked fine

answered Jun 1, 2020 at 19:29

MyDaftQuestions

4,80917 gold badges76 silver badges143 bronze badges

Collectives™ on Stack Overflow

Javascript fetch doesn't return despite correct URL

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related