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

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

程序员文章站 2022-07-03 16:33:40
...

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实现一个搜索案例

效果大致如下

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

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

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

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

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

最终效果

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

 

上一篇： MDK寄存器地址映射分析

下一篇： beego 获取 axios 请求数据

推荐阅读