Stream api support within a react-native project

[manjeets12]

Describe the issue
Does axios support Stream api(https://jakearchibald.com/2016/streams-ftw/#creating-your-own-readable-stream) and that too within a react-native project.

Example Code
fetch support Stream within browser, and as axios is written over fetch hopefully it should also support Stream. Code with fetch is mentioned below

fetch('https://html.spec.whatwg.org/').then(function(response) {
  var reader = response.body.getReader();
  var bytesReceived = 0;

  reader.read().then(function processResult(result) {
    if (result.done) {
      console.log("Fetch complete");
      return;
    }
    bytesReceived += result.value.length;
    console.log(`Received ${bytesReceived} bytes of data so far`);

    return reader.read().then(processResult);
  });
});

Expected behavior, if applicable
So I am expecting that axios will behave same as fetch on browser but will it work within a react-native project, because implementation of fetch is slightly different on web than within react-native environment and so may be implementation of axios(https://stackoverflow.com/questions/56207968/stream-api-with-fetch-in-a-react-native-app),

Additional context/Screenshots
It is not a bug and that too not for axios for sure. I am just expecting suggestions if someone have implemented this kind of functionality or is it possible with axios.

Thanks

[a7urag]

+1

[wgriffin13]

Same issue here. I tested the following code using Jest and the function worked as intended.

async function streamToString(readableStream) {
    return new Promise((resolve, reject) => {
      const chunks = [];
      readableStream.on("data", (data) => {
        chunks.push(data);
      });
      readableStream.on("end", () => {
        resolve(Buffer.concat(chunks).toString('base64'))
      });
      readableStream.on("error", reject);
    });
}

const getAvatar = async (imgUrl) => {
    return axios.get(SERVER_URL + '/api/img/avatar/' + imgUrl, {
        responseType: 'stream'
    })
        .then(async response => {
            const stream = response.data;
            const rawImage = await streamToString(stream);
            const imageUriPrepend = "data:image/jpeg;base64,";
            const image = imageUriPrepend.concat(rawImage);
            return image;
        })
        .catch(error => {
            // Handles error when no avatar is found on Azure
            console.log(error)
            return
        })
}

However, when we put it into the React Native application, we received the error:

Warning: The provided value 'stream' is not a valid 'responseType'.

[jasonsaayman]

HI,

This issue has to do with how Axios XMLHttpRequest. It will be a client side only issue as that is when Axios uses XMLHttpRequest. In XMLHttpRequest stream is not a valid type and therefore the error is being forwarded.

I am going to mark this issue for v1 as it is something we need to certainly look into.

[brainbrian]

I assume this is related to this issue in the browser. If it's using XHR in ReactNative, which I assume it is, you're out of luck. #479

Based on @wgriffin13's error above, this is the same error you will get in your web browser.

[jasonsaayman]

Closed see #479