Fetch: How to fetch PNG image or another base64 entity?

[lu-ko]

Hello,

I'm trying to load PNG image through REST API in ReactNative. Please, do you have some example how to accomplish it via fetch?

fetch(myRestImageResourceUrl, {
    method: 'get',
    headers: { 'Authorization': this.getMyAuthHeader() }
})
.then((response) => {
    if (response.status == 200) {
        console.log('response=' + response);
        return response;
    } else {
        throw new Error(...);
    }
})
.then((responseData) => {
    console.log('responseData: ' + JSON.stringify(responseData, null, 4));
    ...
 })
.catch((error) => {
    console.log('Request failed: ' + error, error);
    ...
})

Messages in log:

03-10 17:31:32.949 2096-2722/? I/ReactNativeJS: response=[object Object]
03-10 17:31:32.949 2096-2722/? I/ReactNativeJS: responseData: {
    "_bodyInit": "",
    "_bodyText": "",
    "type": "default",
    "url": "http://example.com/rest/api/image/12345",
    "status": 200,
    "ok": true,
    "headers": {
        "map": {
            ...
            "content-type": [ "image/png" ],
            ...
        }
    }
}

[dgraham]

The response handler must consume the response body with json(), blob(), or text().

.then((response) => {
    if (response.status == 200) {
        console.log('response=' + response);
        return response.text() // <--------------- consume body here
    } else {
        throw new Error(...);
    }
})
.then((responseData) => {
  // responseData is now the body content
}