欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React AJAX 简单演示

程序员文章站 2022-04-15 22:53:04
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的 ......

react 组件的数据可以通过 componentdidmount 方法中的 ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setstate 方法重新渲染 ui。
当使用异步加载数据时,在组件卸载前使用 componentwillunmount 来取消未完成的请求。

 

下面这个案例用到了jquery,所以安装jquery先

npm i jquery -s

引入jquery

import $ from  'jquery'
import react, { component,fragment } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';
import $ from  'jquery';

class user extends component{
  constructor(props){
    super(props);
    this.state={
      username:'',
      userurl:''
    }
  }

  //组件挂载完成后
  componentdidmount(){
    this.myajax=$.get(this.props.source,res=>{
      var lastgist=res[0];
      console.log(lastgist);
      this.setstate({
        username:lastgist.owner.login,
        userurl:lastgist.html_url
      })
    })
  }

  //组件将要卸载前
  componentwillunmount(){
    //取消未完成的请求
    this.myajax.abort();
  }

  render(){
    return(
      <fragment>
        <div>用户账号:{this.state.username}</div>
        <a href={this.state.userurl}>用户网址:{this.state.userurl}</a>
      </fragment>
    )
  }
}

  reactdom.render(
    <div>
       <user source="https://api.github.com/users/octocat/gists" />  
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React AJAX 简单演示

 

 

可以使用之前知识列出所有条目

import react, { component } from 'react';
import reactdom from 'react-dom';
import './index.css';
import * as serviceworker from './serviceworker';
import $ from  'jquery';

class user extends component{
  constructor(props){
    super(props);
    this.state={
      username:[],
      userurl:[]
    }
  }

  //组件挂载完成后
  componentdidmount(){
    this.myajax=$.get(this.props.source,res=>{
      var lastgist=res;
      var usernames=[];
      var userurls=[];

      lastgist.map(
        function proc(item){
          usernames.push(item.owner.login);
          userurls.push(item.html_url);
          return item;
        }
      )

      this.setstate({
        username:usernames,
        userurl:userurls
      })
    })
  }

  //组件将要卸载前
  componentwillunmount(){
    //取消未完成的请求
    this.myajax.abort();
  }

  render(){
    var names=this.state.username;
    var urls=this.state.userurl;
    return(
      <ul>
        {
          names.map(
            function(item,index){
              return(
                <div key={index}>
                  <li>{item}</li>
                  <a href={urls[index]} rel="nofollow">{urls[index]}</a>
                </div>
              )
            }
          )
        }
      </ul>
    )
  }
}

  reactdom.render(
    <div>
       <user source="https://api.github.com/users/octocat/gists" />  
    </div>,
    document.getelementbyid('example')
  );

serviceworker.unregister();

React AJAX 简单演示