Question

我正在尝试查询以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));
}

Answer 1

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

我将函数从sync转换为async，并将其转换为组件的常规递归方法，而不是使用方法的递归promise。

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

TextDecoder在ES6 Promise递归中失败

1 个答案: