TextDecoder failing in ES6 Promise recursion

Question

I'm attempting to query an API which responds with a ReadableStream of XML.

The code below uses a recursive Promise. Recursive because it sometimes doesn't decode the stream in a singular iteration and this is whats causing my headache.

While I'm successfully fetching the data, for some reason the decoding stage doesn't complete sometimes, which leads me to believe it's when the stream is too large for a single iteration.

componentDidMount() {
    fetch("http://thecatapi.com/api/images/get?format=xml&size=med&results_per_page=9")
        .then((response) => {
            console.log('fetch complete');
            this.untangleCats(response);
        })
        .catch(error => {
            this.state.somethingWrong = true;
            console.error(error);
        });
}

untangleCats({body}) {
    let reader = body.getReader(),
        string = "",
        read;

    reader.read().then(read = (result) => {
        if(result.done) {
            console.log('untangling complete'); // Sometimes not reaching here
            this.herdingCats(string);
            return;
        }

        string += new TextDecoder("utf-8").decode(result.value);
    }).then(reader.read().then(read));
}

Answer 1

I think that the next iteration was sometimes being called before the current iteration had completed, leading to incorrectly concatenation of the decoded XML.

I converted the function from sync to async and as a regular recursive method of the component rather than a recursive promise with a method.

constructor({mode}) {
    super();
    this.state = {
        mode,
        string: "",
        cats: [],
        somethingWrong: false
    };
}    

componentDidMount() {
    fetch("http://thecatapi.com/api/images/get?format=xml&size=med&results_per_page=9")
        .then( response => this.untangleCats( response.body.getReader() ) )
        .catch(error => {
            this.setState({somethingWrong: true});
            console.error(error);
        });
}

async untangleCats(reader) {
    const {value, done} = await reader.read();

    if (done) {
        this.herdingCats();
        return;
    }

    this.setState({
        string: this.state.string += new TextDecoder("utf-8").decode(value)
    });

    return this.untangleCats(reader);
}