从反应组件进行 REST 调用

Posted 2023-02-22

【中文标题】从反应组件进行 REST 调用

【英文标题】：Making REST calls from a react component

【发布时间】：2016-09-25 22:58:08

【问题描述】：

我正在尝试从 react 组件进行 REST 调用并将返回的 JSON 数据呈现到 DOM 中

这是我的组件

import React from 'react';

export default class ItemLister extends React.Component 
    constructor() 
        super();
        this.state =  items: [] ;
    

    componentDidMount() 
        fetch(`http://api/call`) 
            .then(result=> 
                this.setState(items:result.json());
            );
    

    render()         
        return(
           WHAT SHOULD THIS RETURN?
        );
    

为了将返回的 json 绑定到 DOM 中？

【参考方案1】：

您的代码中有几个错误。 this.setState(items:result.json())

Fetch 的.json() 方法返回一个promise，因此需要作为异步处理。

fetch(`http://jsonplaceholder.typicode.com/posts`)
.then(result=>result.json())
.then(items=>this.setState(items))

我不知道为什么.json() 会返回一个承诺（如果有人能解释一下，我很感兴趣）。

对于渲染功能，你去...

<ul>
   this.state.items.map(item=><li key=item.id>item.body</li>)
</ul>

不要忘记唯一键！

对于另一个答案，无需绑定地图。

它正在工作......

http://jsfiddle.net/weqm8q5w/6/

【讨论】：

fetch() 函数返回一个 Promise，因为它是异步的。 Ir 的结果只有在 http 请求完成后才可用，因此 Promise 是处理它的最佳方案。

@JoachimSchirrmacher 我指的是为什么 result.json() 返回一个承诺。它不需要在当前执行上下文之外执行。

.json() 返回一个 Promise，因为 JSON.parse() 在处理大型结果时非常慢，并且如果失败会抛出异常。

.json() 是否返回一个承诺，因为它正在从可能尚未下载的主体流中读取？

【参考方案2】：

你可以试试这个渲染方法：

render() 
    var resultNodes = this.state.items.map(function(result, index) 
        return (
            <div>result<div/>
        );
    .bind(this));
    return (
        <div>
            resultNodes
        </div>
    );

别忘了将.bind(this) 用于你的fetch(...).then()，我认为没有...

【参考方案3】：

Fetch 方法将返回一个 Promise，这使得编写以异步方式工作的代码变得简单：

在你的情况下：

componentDidMount()
  fetch('http://api/call')      // returns a promise object
    .then( result => result.json()) // still returns a promise object, U need to chain it again
    .then( items => this.setState(items));

result.json() 返回一个 Promise，因为它适用于 响应流，我们需要首先处理整个响应才能工作。

【参考方案4】：

请改用以下内容。它将起作用： （如果加载到控制台也可以查看数据）

 constructor(props) 
        super(props);
        this.state = 
            items: []
        
    

 componentDidMount() 
        fetch('http://api/call')
            .then(Response => Response.json())
            .then(res => 
                console.log(res);
                this.setState(
                    items: res,
                );
            )
            .catch(error => 
                console.log(error)
            )
    

然后根据需要使用渲染期间存储在状态中的结果来显示。