react 中使用Ajax请求（axios，Fetch）

React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)

 

 

常用的ajax请求库

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

axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端

fetch: 原生函数, 但老版本浏览器不支持，不再使用XmlHttpRequest对象提交ajax请求，为了兼容低版本的浏览器, 可以引入兼容库fetch.js

 

 

常用的ajax请求库—axios

文档地址：https://github.com/axios/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);
});

相关API—post请求

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

 

 

常用的ajax请求库—fetch

文档地址：https://github.github.io/fetch/，https://segmentfault.com/a/1190000003810652

由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise，需要使用 polyfill es6-promise 

Fetch API 很简单，看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范

相关API-get请求

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

相关API-post请求

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

 

 

分别使用axios和fetch实现一个搜索案例

效果大致如下

使用脚手架创建项目并且创建目录结构并且编写静态的组件

将这个功能抽出来一整个模块（search），将主组件在App.js中引入

search.js（主组件）

组件中需要接收子组件search-input.js传过来的一个searchName数据，search组件拿到这个数据进行请求后台，将返回的数据传递给子组件search-list

search-list有四个状态，初始（initView），查询中（loading），查询的数据（users），查询失败信息（errorMsg）,在父组件中传递给子组件search-list并且根据查询结果进行更新这四个状态，更新状态后子组件会接收到最新的状态

先来看看使用axios

import React, {Component} from 'react'
import axios from 'axios'
import './search.css';

import SearchInput from './search-input/search-input'
import SearchList from './search-list/search-list'
class Search extends Component {

  // search-list有四个状态，初始（initView），查询中（loading），查询的数据（users），查询失败信息（errorMsg）
  state = {
    initView: true,
    loading: false,
    users: [],
    errorMsg: ''
  }
  search = (searchName) => {
    const url = `https://api.github.com/search/users?q=${searchName}`
    this.setState({ initView: false, loading: true })
    axios.get(url)
      .then((response) => {
        this.setState({ loading: false, users: response.data.items })
      })
      .catch((error) => {
        console.log('error', error.response.data.message, error.message)
        this.setState({ loading: false, errorMsg: error.message })
      })
  }
  render() {
    const {initView, loading, users, errorMsg} = this.state
    return (
      <div className='search-axios'>
        <div className='search-input-cantain'>
          <SearchInput search={this.search}/>
        </div>
        <div className='search-list-cantain'>
          <SearchList initView={initView} loading={loading} users={users} errorMsg={errorMsg}/>
        </div>
      </div>
    )
  }
}
export default Search

.search-axios{
  width: 900px;
  height: 600px;
  margin: 40px auto 0;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}
.search-input-cantain{
  width: 100%;
  height: 100px;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
}
.search-list-cantain{
  width: 100%;
  height: 500px;
  padding: 20px;
  box-sizing: border-box;
}

子组件search-input

将输入框的数据使用自定义事件传个父组件search

import React, {Component} from 'react'
import './search-input.css';
import propTypes from 'prop-types'

class SearchInput extends Component {
  static propTypes = {
    search: propTypes.func.isRequired
  }

  handleSearch = () => {
    // 获取输入框中的数据
    const searchName = this.searchName.value

    // 更新状态
    this.props.search(searchName)

    // 清空输入框中的数据
    this.searchName.value = ''
  }

  render() {
    return (
      <div className='search-input'>
        <input type='text' ref={input => this.searchName = input} placeholder='enter the name you search'/>
        <button onClick={this.handleSearch}>Search</button>
      </div>
    )
  }
}
export default SearchInput

.search-input input{
  width: 80%;
  height: 35px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  outline: none;
  border: 1px solid #cccccc;
  padding: 0 8px;
  box-sizing: border-box;
}
.search-input button{
  width: 20%;
  text-align: center;
  height: 35px;
  line-height: 35px;
  outline: none;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: -2px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

子组件search-list根据父组件search传过来的四个状态进行判断显示

import React, {Component} from 'react'
import './search-list.css';
import propTypes from "prop-types";

class SearchList extends Component {
  static propTypes = {
    initView: propTypes.bool.isRequired,
    loading: propTypes.bool.isRequired,
    users: propTypes.array.isRequired,
    errorMsg: propTypes.string.isRequired
  }
  render() {
    const {initView, loading, users, errorMsg} = this.props

    if (initView) {
      return <div className='search-hide-enter'>enter the name you search</div>
    } else if (loading) {
      return <div className='search-ing'>搜索中，请稍后.....</div>
    } else if (errorMsg) {
      return <div className='search-error'>{errorMsg}</div>
    } else {
      return (
        <div className='search-list'>
          {users.map((user, index) => (
            <div className='search-item' key={index}>
              <div className='search-item-img'><img src={user.avatar_url} alt='user'/></div>
              <p className='search-item-name'>{user.login}</p>
            </div>
          ))}
        </div>
      )
    }
  }
}
export default SearchList

.search-list{
  width: 100%;
  height: 460px;
  overflow-y: auto;
}
.search-item{
  width: 25%;
  height: 150px;
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
}
.search-item-img{
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.search-item-img img{
  max-width: 100%;
}
.search-item p{
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
}
.search-hide-enter,.search-ing,.search-error{
  font-size: 20px;
}

另外一种方式是子组件search-input将输入框的数据使用自定义事件传个父组件search，父组件search在将这个数据传给子组件search-list，子组件search-list接收到新的属性时自动调用componentWillReceiveProps这个方法继续ajax请求

search组件

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

import SearchInput from './search-input/search-input'
import SearchList from './search-list/search-list'
class Search extends Component {

  state = {
    searchName: ''
  }
  search = (searchName) => {
    this.setState({searchName})
  }
  render() {
    const {searchName} = this.state
    return (
      <div className='search-axios'>
        <div className='search-input-cantain'>
          <SearchInput search={this.search}/>
        </div>
        <div className='search-list-cantain'>
          <SearchList searchName={searchName} />
        </div>
      </div>
    )
  }
}
export default Search

search-list组件

import React, {Component} from 'react'
import './search-list.css';
import propTypes from "prop-types";
import axios from 'axios'

class SearchList extends Component {
  static propTypes = {
    searchName: propTypes.string.isRequired
  }

  state = {
    initView: true,
    loading: false,
    users: [],
    errorMsg: null
  }
  // 当组件接收到新的属性时回调(生命周期的函数)
  async componentWillReceiveProps(newProps)  {
    const {searchName} = newProps
    const url = `https://api.github.com/search/users?q=${searchName}`
    this.setState({ initView: false, loading: true })
    try {
      let data = await axios.get(url);
      this.setState({ loading: false, users: data.data.items })
    } catch(e) {
      this.setState({ loading: false, errorMsg: e.message })
      console.log("Oops, error", e);
    }
  }

  render() {
    const {initView, loading, users, errorMsg} = this.state

    if (initView) {
      return <div className='search-hide-enter'>enter the name you search</div>
    } else if (loading) {
      return <div className='search-ing'>搜索中，请稍后.....</div>
    } else if (errorMsg) {
      return <div className='search-error'>{errorMsg}</div>
    } else {
      return (
        <div className='search-list'>
          {users.map((user, index) => (
            <div className='search-item' key={index}>
              <div className='search-item-img'><img src={user.avatar_url} alt='user'/></div>
              <p className='search-item-name'>{user.login}</p>
            </div>
          ))}
        </div>
      )
    }
  }
}
export default SearchList

最终效果