Question

问题是：我有一个小型React应用和远程服务器（仅url是已知的）。另外，我知道一些服务器方法，例如“ GET / api / records”-从服务器获取所有数据。如何通过这种方法进行交流？

我有一个按钮，用于启动处理程序，并在其中使用提取。

getRecords() {
    fetch("http://xxx.xxx.xxx.xxx:3000/api/records/", {method: "GET"})
        .then((response) => console.log(response));
}

通过console.log，我收到一个Response对象。如何从中获取数据？

Answer 1

在处理程序中，您可以使用响应来充实状态。试试：

getRecords() {
    fetch("http://xxx.xxx.xxx.xxx:3000/api/records/", {method: "GET"})
        .then(response => response.json())
        .then(data => {
             this.setState({
                 yourDataKey: data
             })
        })
}

来自Google documentation:

fetch（）请求的响应是一个Stream对象，这意味着当我们调用json（）方法时，由于该流的读取将异步发生，因此会返回Promise。

因此，第一个将流对象转换为json，第二个将将json保存在组件状态。

如何从React组件进行远程服务器调用？

1 个答案: