React---发送Ajax请求

1. 理解

1.1. 前置说明

1. React本身只关注于界面, 并不包含发送ajax请求的代码
2. 前端应用需要通过ajax请求与后台进行交互(json数据)
3. react应用中需要集成第三方ajax库(或自己封装)
4. jQuery: 比较重, 如果需要另外引入不建议使用
5. axios: 轻量级, 建议使用

1.2. 常用的ajax请求库

1) 封装XmlHttpRequest对象的ajax

2)  promise风格

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

2. axios

2.1. 文档

　　地址： https://github.com/axios/axios

 　　安装axios: npm install axios

2.2. 相关API

　　1）GET请求

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

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

2）POST请求

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

3. 案例

分析：

　　 1.设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。

        2.ES6小知识点：解构赋值+重命名

                    let obj = {a:{b:1}}

                    const {a} = obj; //传统解构赋值

                    const {a:{b}} = obj; //连续解构赋值

                    const {a:{b:value}} = obj; //连续解构赋值+重命名

        3.消息订阅与发布机制

                    1.先订阅，再发布（理解：有一种隔空对话的感觉）

                    2.适用于任意组件间通信

                    3.要在组件的componentWillUnmount中取消订阅

        4.fetch发送请求（关注分离的设计思想）

                    try {

                        const response= await fetch(`/api1/search/users?q=${keyWord}`)

                        const data = await response.json()

                        console.log(data);

                    } catch (error) {

                        console.log('请求出错',error);

                    }

(1)App.jsx

import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'

export default class App extends Component {

    state = { //初始化状态
        users:[], //users初始值为数组
        isFirst:true, //是否为第一次打开页面
        isLoading:false,//标识是否处于加载中
        err:'',//存储请求相关的错误信息
    } 

    //更新App的state
    updateAppState = (stateObj)=>{
        this.setState(stateObj)
    }

    render() {
        return (
            <div className="container">
                <Search updateAppState={this.updateAppState}/>
                <List {...this.state}/>
            </div>
        )
    }
}

(2) List.jsx

import React, { Component } from 'react'
import './index.css'

export default class List extends Component {
    render() {
        const {users,isFirst,isLoading,err} = this.props
        return (
            <div className="row">
                {
                    isFirst ? <h2>欢迎使用，输入关键字，随后点击搜索</h2> :
                    isLoading ? <h2>Loading......</h2> :
                    err ? <h2 style={{color:'red'}}>{err}</h2> :
                    users.map((userObj)=>{
                        return (
                            <div key={userObj.id} className="card">
                                <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                    <img alt="head_portrait" src={userObj.avatar_url} style={{'100px'}}/>
                                </a>
                                <p className="card-text">{userObj.login}</p>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

(3) Search.jsx

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

export default class Search extends Component {

    search = ()=>{
        //获取用户的输入(连续解构赋值+重命名)
        const {keyWordElement:{value:keyWord}} = this
        //发送请求前通知App更新状态
        this.props.updateAppState({isFirst:false,isLoading:true})
        //发送网络请求
        axios.get(`/api1/search/users?q=${keyWord}`).then(
            response => {
                //请求成功后通知App更新状态
                this.props.updateAppState({isLoading:false,users:response.data.items})
            },
            error => {
                //请求失败后通知App更新状态
                this.props.updateAppState({isLoading:false,err:error.message})
            }
        )
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        )
    }
}