Question

我有多个api。我如何获得输出。在这里，我添加了示例代码段。在那个abc是组件。下一个组件xyz，pqr就是这样。

let str1="http://localhost:ip/abc?text="+this.state.content;
    fetch(str1, {
        method: "GET",
        })
        .then(res => res.json())
        .then(res => {
          this.setState({
            res: res.abc
            });
        });

Answer 1

我要作一些假设。假设您想同时发出3个不同的API请求，并将结果用于React setState，则可以使用Promise.all：

const reqA = fetch(`http://localhost:ip/abc?text=${this.state.content}`);
const reqX = fetch(`http://localhost:ip/xyz?text=${this.state.content}`);
const reqP = fetch(`http://localhost:ip/pqr?text=${this.state.content}`);
Promise.all([reqA, reqX, reqP]).then(function(allResults) {
    Promise.all(allResults.map(res => res.json())).then(function(
        jsonResults
    ) {
        console.log("Results", jsonResults);
        // Parse, and call `setState` here
    });
});

上面的代码段将同时对3个URL进行XHR调用，收集其结果，尝试为所有3个响应解析对JSON的响应，并收集其结果。此时，您可以解析并设置响应状态。

请注意，这不包括用于处理3个请求中任何一个的错误的逻辑。您应该考虑到这一点。如果您的请求URL与上面的代码段相似，那么您可以定义一个给定“组件”的构造URL的函数。上面的代码段也没有考虑在请求仍在进行中时您的组件可能会被卸载的可能性。

如何附加多个API

1 个答案: