I've been playing around with the Google+ API and trying to get the profile image url of a Google+ user with this url:

/{user_id}?key={API_KEY}

No OAuth is needed and you can also give it a try here (no API key needed):

.people.get?userId=116725099929439898086&_h=1&

At first I used the Fetch API to fetch the data since I also want to use a service worker to do that:

fetch('')
.then(function(response){
    console.log(response);
});

But it only gives me this response:

{
    body: ReadableStream
    bodyUsed: false
    headers: Headers
    ok: true
    status: 200
    statusText: ""
    type: "cors"
    url: ""
}

However, if I use jQuery's getJSON method instead:

$.getJSON( "", function( data ) {
    console.log(data);
}); 

It works like a charm and I can get what I need:

{
 "kind": "plus#person",
 "etag": "\"FT7X6cYw9BSnPtIywEFNNGVVdio/DgskSQn7XXHCvjcdFBFkiqEbsfo\"",
 "gender": "male",
 "urls": [ ... ],
 "objectType": "person",
 "id": "116725099929439898086",
 "displayName": "Kevin Lai",
 ...
}

Can someone explain why they will to such different behaviors? And also, how can I fix the problem while still using the Fetch API so I can still do this asynchronous task in a service worker?

I've been playing around with the Google+ API and trying to get the profile image url of a Google+ user with this url:

https://www.googleapis./plus/v1/people/{user_id}?key={API_KEY}

No OAuth is needed and you can also give it a try here (no API key needed):

https://developers.google./apis-explorer/#p/plus/v1/plus.people.get?userId=116725099929439898086&_h=1&

At first I used the Fetch API to fetch the data since I also want to use a service worker to do that:

fetch('https://www.googleapis./plus/v1/people/116725099929439898086?key=MY_API_KEY')
.then(function(response){
    console.log(response);
});

But it only gives me this response:

{
    body: ReadableStream
    bodyUsed: false
    headers: Headers
    ok: true
    status: 200
    statusText: ""
    type: "cors"
    url: "https://www.googleapis./plus/v1/people/115681458968227650592?key=MY_API_KEY"
}

However, if I use jQuery's getJSON method instead:

$.getJSON( "https://www.googleapis./plus/v1/people/115681458968227650592?key=MY_API_KEY", function( data ) {
    console.log(data);
}); 

It works like a charm and I can get what I need:

{
 "kind": "plus#person",
 "etag": "\"FT7X6cYw9BSnPtIywEFNNGVVdio/DgskSQn7XXHCvjcdFBFkiqEbsfo\"",
 "gender": "male",
 "urls": [ ... ],
 "objectType": "person",
 "id": "116725099929439898086",
 "displayName": "Kevin Lai",
 ...
}

Can someone explain why they will to such different behaviors? And also, how can I fix the problem while still using the Fetch API so I can still do this asynchronous task in a service worker?

• javascript
• jquery
• fetch-api

• Probably google send you response in json format. – Ataur Rahman Munna Commented Apr 4, 2017 at 8:14

1 Answer 1

Change the fetch() call to use response.json() (see MDN docs) to extract the JSON from the response body.

fetch('https://www.googleapis./plus/v1/people/116725099929439898086?key=MY_API_KEY')
.then(function (response){
    return response.json();
})
.then(function (json){
    console.log(json);
});