react+axios实现github搜索用户功能(示例代码)

react+axios实现github搜索用户功能(示例代码)_第1张图片

加载

react+axios实现github搜索用户功能(示例代码)_第2张图片

请求成功

react+axios实现github搜索用户功能(示例代码)_第3张图片

请求失败

react+axios实现github搜索用户功能(示例代码)_第4张图片

在文件路径点击cmd 回车

react+axios实现github搜索用户功能(示例代码)_第5张图片

react+axios实现github搜索用户功能(示例代码)_第6张图片
react+axios实现github搜索用户功能(示例代码)_第7张图片

首先把服务器打开 npm start

react+axios实现github搜索用户功能(示例代码)_第8张图片

app.js

import React, { Component } from 'react'
import "./App.css"
import Header from './conompents/Header'
import List from './conompents/List'
export default class App extends Component {
  // 初始化state
  state={
    users:[],
    isloading:false,
    isfirst:true,
    err:''

  }
  update=(updatemessage)=>{
     this.setState(
      updatemessage
     )
  }
  render() {
    return (
      
) } }

Header.jsx

import React, { Component } from 'react'
import axios from"axios"

export default class Header extends Component {
  search=()=>{
     console.log(this.searchbtn.value);
     this.props.update({isfirst:false, isloading:true})
     axios.get(`http://localhost:3000/api1/search/users?q=${this.searchbtn.value}`).then(
      //  成功时回调
       response=>{
        
         console.log("发送请求成功",response.data.items);
         this.props.update({users: response.data.items,isloading:false})
       },
      // 失败时回调
      error=>{
        this.props.update({err:error.message,isloading:false})
          console.log("失败了",error.message);
      }
     )
  } 

    render() {
        return (
            

Search Github Users

this.searchbtn=c} />  
) } }

List.jsx

import React, { Component } from 'react'
import Listitem from './Listem'

export default class List extends Component {
  render() {
    return (
      
{ this.props.users.isfirst ?

Welcome to use, please enter the keyword

: this.props.users.isloading ?

Loading......

: this.props.users.err ?

{this.props.users.err}

: this.props.users.users.map((a) => { return ( ) }) }
) } }

Listitem

import React, { Component } from 'react'
import "./index.css"
export default class Listitem extends Component {
 
    render() {
        return (
            

{this.props.users.login}

) } }

到此这篇关于react+axios实现搜索github用户功能的文章就介绍到这了,更多相关react axios github搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的