1

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

1 回答 1

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);
}
于 2018-03-29T09:59:56.533 回答