[React] 尚硅谷 -- 学习笔记(四)

第四章 react ajax

理解

• React本身只关注于界面, 并不包含发送ajax请求的代码

• 前端应用需要通过ajax请求与后台进行交互(json数据)

• react应用中需要集成第三方ajax库(或自己封装)

   

常用的ajax请求库

• jQuery: 比较重, 如果需要另外引入不建议使用

• axios: 轻量级, 建议使用

  • 封装XmlHttpRequest对象的ajax

  • promise风格

  • 可以用在浏览器端和node服务器端

• fetch: 原生函数, 但老版本浏览器不支持

  • 不再使用XmlHttpRequest对象提交ajax请求

  • 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

 

axios

相关API

GET请求

axios.get('/user?ID=12345')
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});

axios.get('/user', {
    params: {
        ID: 12345
    }
})
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});

POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
    .then(function (response) {
    console.log(response);
})
    .catch(function (error) {
    console.log(error);
});

 

Fetch

相关API

GET请求

fetch(url).then(function(response) {
    return response.json()
}).then(function(data) {
    console.log(data)
}).catch(function(e) {
    console.log(e)
});

POST请求

fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
}).then(function(data) {
    console.log(data)
}).catch(function(e) {
    console.log(e)
})

 

案例 - github users

效果

 

• app.jsx

import React, {Component} from 'react'

import Search from "./search";
import Main from "./main";

export default class App extends Component {

    state = {
        searchName:''
    }
    setSearchName = (searchName) =>{
        // 更新状态
        this.setState({searchName})
    }

    render() {
        return (
            <div className="container">
                <Search setSearchName={this.setSearchName}/>
                <Main searchName={this.state.searchName}/>
            </div>
        );
    }
}

• main.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'

export default class Main extends Component {

    static propTypes = {
        searchName: PropTypes.string.isRequired
    }

    state = {
        initView: true,
        loading: false,
        users: null,
        errorMsg: null
    }

    // 当组件接收到新的属性时回调
    componentWillReceiveProps(newProps) {// 指定了新的searchName, 需要请求
        const {searchName} = newProps
        //更新状态(请求中)
        this.setState({
            initView: false,
            loading: true
        })
        // 发ajax请求
        const url = `https://api.github.com/search/users?q=${searchName}`
        axios.get(url)
            .then(response => {
                // 得到响应数据
                const result = response.data
                console.log(result)
                const users = result.items.map(item => {
                    return {
                        name: item.login,
                        url: item.html_url,
                        avatarUrl: item.avatar_url
                    }
                })
                // 更新状态(成功)
                this.setState({loading: false, users})
            })
            .catch(error => {
                // 更新状态(失败)
                this.setState({loading: false, errorMsg: error.message})
            })

    }

    render() {
        const {initView, loading, users, errorMsg} = this.state
        const {searchName} = this.props
        console.log('render()', searchName)

        if (initView) {
            return <h2>请输入关键进行搜索: {searchName}</h2>
        } else if (loading) {
            return <h2>正在请求中...</h2>
        } else if (errorMsg) {
            return <h2>{errorMsg}</h2>
        } else {
            return (
                <div className="row">
                    {
                        users.map((user, index) => (
                            <div className="card" key={index}>
                                <a href={user.url} target="_blank">
                                    <img src={user.avatarUrl} style={{width: 100}}/>
                                </a>
                                <p className="card-text">{user.name}</p>
                            </div>
                        ))
                    }

                </div>
            )
        }

    }
}

• search.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Search extends Component {

    static propTypes = {
        setSearchName: PropTypes.func.isRequired
    }

    search = () => {
        // 得到输入的关键字
        const searchName = this.input.value.trim()
        if (searchName) {
            // 搜索
            this.props.setSearchName(searchName)
        }

    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input type="text" placeholder="enter the name you search" ref={input => this.input = input}/>
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

• index.css

.album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
}

.card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
}

.card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
}

.card-text {
    font-size: 85%;
}

• index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from "./compontents/app";

import './index.css'

ReactDOM.render(<App/>,document.getElementById('root'))