react中的ajax请求

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
      class UserGist extends React.Component {
        constructor(props) {
          super(props);
          this.state = { title: "", content: "" };
        }

        componentDidMount() {
          this.serverRequest = $.get(
            this.props.source,
            function (result) {
              var lastGist = result.data;
              console.log(lastGist);
              this.setState({
                title: lastGist.title,
                content: lastGist.content,
              });
            }.bind(this)
          );
        }

        componentWillUnmount() {
          this.serverRequest.abort();
        }

        render() {
          return (
            <div>
              {this.state.title} 用户最新的 Gist 共享地址：
              <a href={this.state.content}>{this.state.content}</a>
            </div>
          );
        }
      }

      ReactDOM.render(
        <UserGist source="1.json" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script type="text/babel">
      class UserGist extends React.Component {
        constructor(props) {
          super(props);
          //在state设置两个属性，以便后续通过state对象来对其进行修改
          this.state = { username: "", lastGistUrl: "" };
          //绑定挂载事件
          this.componentDidMount = this.componentDidMount.bind(this);
        }

        componentDidMount() {
          //接下来操作state时上下文对象发生改变，此处拿到操作句柄
          var that = this;
          //ajax请求
          this.serverRequest = $.ajax({
            url: this.props.source,
            type: "GET",
            dataType: "jsonp",
            success: function (result) {
              console.log(result.data);
              var lastGist = result.data;
              //此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作
              that.setState({
                title: lastGist.title,
                content: lastGist.content,
              });
            },
          });
        }

        //卸载React组件时，把多余请求关闭，以免影响其他框架或组件的操作
        componentWillUnmount() {
          this.serverRequest.abort();
        }

        render() {
          return (
            <div>
              {this.state.title} 用户最新的 Gist 共享地址：
              <a href={this.state.content} rel="nofollow">
                {this.state.content}
              </a>
            </div>
          );
        }
      }

      ReactDOM.render(
        <UserGist source="https://gitee.com/feature_notifications" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

おすすめ