TextDecoder 在 ES6 Promise 递归中失败答案

【问题标题】：TextDecoder failing in ES6 Promise recursionTextDecoder 在 ES6 Promise 递归中失败
【发布时间】：2018-09-07 15:55:22
【问题描述】：

我正在尝试查询以 XML 的 ReadableStream 响应的 API。

下面的代码使用递归 Promise。递归，因为它有时不会在单次迭代中解码流，这就是让我头疼的原因。

虽然我成功地获取了数据，但由于某种原因，有时解码阶段没有完成，这让我相信这是流太大而无法进行单次迭代的时候。

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));
}

【问题讨论】：

标签： ecmascript-6 stream es6-promise fetch-api text-decoding

【解决方案1】：

我认为下一次迭代有时会在当前迭代完成之前被调用，导致解码后的 XML 连接不正确。

我将函数从同步转换为异步，并作为组件的常规递归方法，而不是带有方法的递归承诺。

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);
}

【讨论】：