反应中的异步xmlhttp请求 [英] Asynchronous xmlhttp request in react

问题描述

我正在尝试在 React 中实现异步 XMLHttpRequest.这是我的尝试:

var xhr = new XMLHttpRequest();var json_obj, status = false;xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);xhr.onload = 函数 (e) {如果(xhr.readyState === 4){如果(xhr.status === 200){json_obj = xhr.responseText;状态 = 真；} 别的 {控制台错误(xhr.statusText)；}}};xhr.onerror = 函数 (e) {控制台错误(xhr.statusText)；};xhr.send(null);class Welcome 扩展 React.Component {使成为() {返回 (<div><img src= {状态 ?json_obj[0].url : '正在加载...'}></img>

);}}ReactDOM.render(<欢迎/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

我一直在考虑给它添加监听器，但我不知道该怎么做.

总的来说，我在异步 XMLHttpRequest 加载并返回值后遇到更新问题.

解决方案

使用组件的生命周期来加载数据，然后异步设置状态.您还需要对返回给您的数据使用 JSON.parse.

class Welcome 扩展 React.Component {状态 = {}componentDidMount() {var xhr = new XMLHttpRequest();var json_obj, status = false;xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);xhr.onload = 函数 (e) {如果(xhr.readyState === 4){如果(xhr.status === 200){var json_obj = JSON.parse(xhr.responseText);状态 = 真；this.setState({ json_obj });} 别的 {控制台错误(xhr.statusText)；}}}.bind(this);xhr.onerror = 函数 (e) {控制台错误(xhr.statusText)；};xhr.send(null);}使成为() {返回 (<div><img src= {this.state.json_obj ?this.state.json_obj[0].url : '加载中...'}></img>

);}}ReactDOM.render(<欢迎/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

I am trying to implement asynchronous XMLHttpRequest in react. Here is my attempt:

var xhr = new XMLHttpRequest();
var json_obj, status = false;
xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      json_obj = xhr.responseText;
      status = true;
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

class Welcome extends React.Component {
  render() {
    return (
      <div>
          <img src= {status ?  json_obj[0].url : 'loading...'}></img>
      </div>
    );
  }
}
ReactDOM.render(
   <Welcome/>,
   document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

I have been thinking about adding listener to it but i don't know how to do it.

Overall i am having problem with an update after async XMLHttpRequest loads and returns value.

解决方案

Use the component's lifecycle to load the data and then set the state asynchronously. You will also need to use JSON.parse on the data returned to you.

class Welcome extends React.Component {
  state = {}

  componentDidMount() {
    var xhr = new XMLHttpRequest();
    var json_obj, status = false;
    xhr.open("GET", "https://jsonplaceholder.typicode.com/photos/", true);
    xhr.onload = function (e) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var json_obj = JSON.parse(xhr.responseText);
          status = true;
          this.setState({ json_obj });
        } else {
          console.error(xhr.statusText);
        }
      }
    }.bind(this);
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);
  }

  render() {
    return (
      <div>
          <img src= {this.state.json_obj ?  this.state.json_obj[0].url : 'loading...'}></img>
      </div>
    );
  }
}
ReactDOM.render(
   <Welcome/>,
   document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

这篇关于反应中的异步xmlhttp请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！