如何在React中做Ajax 请求?

如何在React中做Ajax 请求?

首先:React本身没有独有的获取数据的方式。实际上,就React而言,它甚至不知道有服务器画面的存在。

React只是简单地渲染组件,单独从两个地方获取数据:propsstate

因此,为了使用服务器的数据,你需要在你的组件(component)的propsstate里拿到数据。

你可以将这个过程与服务和数据模型复杂化,就像你所希望的那样,但最终只是组件渲染propsstate

选择一个HTTP 库

为了获取来自服务器的数据,你需要一个HTTP库,网上有很多,最终他们都做同样的事情,但他们有不同的特点。

当然,你也可以选择自己封装一个ajax库,我喜欢Axios,下面将以这个库作为例子,如果你不喜欢,可以选择其他库看看。

Fetch Data

如下是一个简单的实例,一个组件从subreddit获取职位。看看这个例子,我们将会了解它是如何工作的


import React from 'react';

import ReactDOM from 'react-dom';

import axios from 'axios';

class FetchDemo extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      posts: []

    };

  }

  componentDidMount() {

    axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`)

      .then(res => {

        const posts = res.data.data.children.map(obj => obj.data);

        this.setState({ posts });

      });

  }



  render() {

    return (

      <div>

        <h1>{`/r/${this.props.subreddit}`}</h1>

        <ul>

          {this.state.posts.map(post =>

            <li key={post.id}>{post.title}</li>

          )}

        </ul>

      </div>

    );

  }

}

ReactDOM.render(

  <FetchDemo subreddit="reactjs"/>,

  document.getElementById('root')

);

它是如何工作的?

首先,我们将axiosimport进来。

然后在constructor 里先调用super,接着初始化state,让它拥有一个posts空数组。

componentDidMount是关键所在,这个方法将会在组件插入DOM的第一时间执行。该方法在整个组件的生命周期只会执行一次。

它使用axios.get方法从subreddit获取数据,反引号的字符串是ES6的模板字符串,${}部分是由表达式的值所取代,所以URL传递给axios.get实际上是http://www.reddit.com/r/react...

有两点你需要注意的是:

  • 你可以在任意的subreddit URL末尾处附加上.json并且获得那个职位的json形式的展示

  • 如果你忘记www,你会得到一个CORS错误

因为Axios使用Promise,所有我们可以链式调用then方法来处理response。获取的职位信息是一点一点的转换后提取的,最重要的一点是,组件的状态(state)是由职位与新数组调用this.setState更新的,由此触发一个重新渲染,然后职位的信息就可以看见了


30.2k 声望
4.7k 粉丝
0 条评论
推荐阅读
谈谈react hooks UI与业务逻辑分离的必要性与技术方案
当前端业务复杂度上升到一定程度的时候,如何提升前端代码质量便成了老生常谈的话题。似乎前端总逃不开改他人代码,重构,修复bug的宿命。那么,我们要如何从项目代码层面,改变这一局面呢?才能保证项目A之于开...

trigkit41阅读 721

深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 6k评论 3

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 1.6k评论 1

封面图
第九期:前端九条启发分享
下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。

lulu_up8阅读 437

React为什么不将Vite作为默认推荐?
CRA推出于2016年,彼时还没有成体系的React脚手架工具供大家使用,再加上这是官方工具,一经推出就受到了欢迎。截止当前,CRA仓库已经收获快10wstar。

卡颂4阅读 1.2k

封面图
如何优雅的实现网页多主题风格换肤功能?
对于网页换肤,例如最常见的深色、浅色风格已经是很常见的一个需求了。一直以来也有很多的实现方案,这里我主要介绍一下基于 CSS variable的实现方式

前端有猫腻4阅读 1.3k评论 1

封面图
30.2k 声望
4.7k 粉丝
宣传栏