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

最新推荐文章于 2024-08-05 11:37:51 发布

itclanCoder

最新推荐文章于 2024-08-05 11:37:51 发布

阅读量3.5k

点赞数 1

本文链接：https://blog.csdn.net/wzc_coder/article/details/102952328

版权

本文详细介绍了在React中如何发起Ajax请求，包括使用Axios、fetch、jQuery Ajax和request的方法，并强调了请求通常应在componentDidMount中进行。此外，还探讨了在public目录下模拟本地数据以及使用Charles、Mockoon和Easy Mock等工具进行数据模拟的技巧。

摘要由CSDN通过智能技术生成

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

撰文 | 川川

VX-ID:suibichuanji

点击文末左下方阅读原文,可看视频内容

前言

在React中,render函数返回的结果,取决于组件的props和state

我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的

然后将真实的数据填充到页面上 ,那么应该在哪个生命周期函数中发起请求?

又如何发起Ajax请求呢以及有哪些方式? 以及我们怎么样模拟一个后端数据接口?

那么本小节就是你想要知道的

示例API返回如下json对象

假如后端返回的商品列表如下所示

{
    
  "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": "海南"}
   ] 
}

把这段商品列表的json代码命名为goodlist.json,放到根目录public的api文件夹内

在public目录下的api文件夹下都可以放置你自己模拟的数据,该模拟的数据文件只能放置在public目录下,否则就会报错,不生效的

对应的UI效果显示:如下所示

当然对于UI以什么样的方式来显示,你自己可以用css进行控制的，这并不是文本的重点

在哪个生命周期函数中发送AJax请求

把Ajax请求放在componentWillMount组件即将被挂载的函数中也是可以的

但是官方推荐放在componentDidMount这个生命周期函数中发起Ajax请求,因为执行这个生命周期时,DOM已经挂载完了

这样做可以拿到Ajax请求返回的数据并通过setState来更新组件

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

如何发送AJax请求？

在React中,你可以使用你喜欢的Ajax库,例如：Axios,浏览器内置的feach方法,JQuery Ajax,或是第三方库request,下面就逐一来看看的

方式一使用Axios发送Ajax请求

该方式无论是Vue还是React甚至其他一些框架中,都普遍常用,它支持promise方式，在使用axios库之前,应该先在终端下使用npm或者cnpm全局安装一下

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

安装完axios后,在需要使用请求数据的文件最上面,引入axios库,如下代码所示,下面是上面示例API的具体代码

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'; // 这里是