React学习(九)-React中发送Ajax请求以及Mock数据开发者社区

React学习(九)-React中发送Ajax请求以及Mock数据

{
  "goodLists": [
      {"id": 1, "name": "瓜子", "price": 10, "address": "广东"},
      {"id": 2, name": "苹果", "price": 20, "address": "北京"}，
      {"id": 3, "name": "橘子", "price": 8, "address": "湖南"}，
      {"id": 4, "name": "桃子", "price": 13, "address": "北京"},
      {"id": 5, "name": "榴莲", "price": 18, "address": "海南"}
}

componentDidMount(){
   // 在这里进行Ajax数据请求，axios,fetch,jquery Ajax或者request都可以
}

npm install -S axios
或者cnpm install -S axios
或者yarn add axios

import React, { Fragment, Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios'; // 引入axios库
import "./style.css";
class List extends Component {
  constructor(props){
    super(props);
    this.baseUrl = '/api/goodlist'; // 这里是本地模拟,在public下创建一个api文件,放置一个json文件，这里的路径直接是根路径即可,react会自动的找到这个目录
    // this.baseUrl = 'http://localhost:4000/api/goodlist'; // 这种方式是使用代理的方式,这里用的是mockoon工具
    // this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2/api/googlists'; //这是使用easy-mock
    this.state = {
      list: []
  render(){
    const { list } = this.state;
    return (
        <Fragment>
                    list.map((item) => {
                      const isRed = item.price >= 10 ? 'red':'';
                      return (
                        <li key = {item.id}>{item.name}-<span className={ isRed }>{item.price}￥</span>-{item.address}</li>
        </Fragment>
 // Ajax请求放在componentDidMount生命周期内
  componentDidMount(){
    // 使用axios完成ajax数据请求
    axios.get(this.baseUrl)
    .then(res => {
       const { goodlists } = res.data;
       this.setState({
          list: goodlists
    .catch(err => {
       console.log(err);
const container = document.getElementById('root');
ReactDOM.render(<List   />, container);

componentDidMount(){
    // 使用fetch,这里的地止换成上面的this.baseUrl也是可以的
    fetch('/api/goodlist')
      .then(res => res.json())
      .then((result) => {
        console.log(result);
        const { goodlists } = result;
        this.setState({
          list: goodlists
     // 注意在这里处理错误时,与axios有些区别,不是用catch()去捕获错误,因为使用catch去捕获异常会掩盖掉组件本身可能产生的bug
     (error) => {
        console.log(error);
  }

npm install -S jquery
cnpm install -S jquery

import $ from 'jquery'

componentDidMount(){
     $.get('/api/goodlist', function(res){
       console.log(res);
       this.setState({
         list: res.goodLists
     }.bind(this)) // 这里必须手动绑定this
    // 等价于下面的,如果不手动绑定,可以使用箭头函数,避免this的绑定
    $.get('/api/goodlist', (res) => {
       console.log(res);
       const { goodlists } = res;
       this.setState({
          list: goodlists
  }

npm install -S request
npm install -S request-promise

import rp from 'request-promise'

componentDidMount(){
    // 使用request-promise请求数据
    // 注意这里的this.baseUrl不支持/api/goodlist.json方式,下面的this.baseUrl是http://localhost:4000/api/goodlist,以及真实的地止,都是可以的
    rp(this.baseUrl)
      .then(res => {
        // 这里要注意的是res返回的是一个字符串,需要用JSON.parse()方法将字符串转化为json对象
        const { goodlists } = JSON.parse(res);
        this.setState({
           list: goodlists
      .catch(error => {
        console.log(error);
  }

react-ajax
├── package-lock.json
├── package.json
├── public // 在该目录下创建一个api文件夹,把需要的模拟的数据放在一个json文件即可
│ ├── api
│ │ └── goodlist.json
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── README.md

React学习(九)-React中发送Ajax请求以及Mock数据

React学习(九)-React中发送Ajax请求以及Mock数据

示例API返回如下json对象