如何在React中处理REST API请求

REST API通常用于Web开发中。它们是Web应用程序用来彼此“交谈”的编程接口。它们用于访问功能部件和数据。“ REST”(代表性状态转移)是定义API属性的概念。本文将重点介绍如何使用基于Web的API从数据库中检索数据。

Axios是一个npm软件包,允许应用程序将HTTP请求发送到Web API。要在您的React应用程序中使用Axios,请使用以下命令:

npm install axios

要么

yarn add axios

在创建react组件之前,请按照以下步骤将React和Axios导入文件:

import React from ‘react‘;
import axios from ‘axios‘;

在React生命周期方法‘componentWillMount‘中利用了Axios请求。尽管此方法从那时起已过时,但在撰写本文时仍可使用。它将一直持续到React 17发行。在需要异步渲染时,使用它并不安全。应当使用“ componentDidMount”方法代替它。

该方法在组件更新到DOM之后运行,是注册API调用的好地方。到目前为止的基本结构如下:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }
  componentDidMount() {
    // Your axios request here
  }

  render() {
    return (
    //  Your jsx goes here
    );
  }
}

Axios请求具有以下基本结构:

axios({ method: ‘http request method‘, url: ‘Api url‘ });

如上所示,基本请求将对象作为参数。在该对象中,指定了方法和URL密钥。HTTP请求方法类型和API URL被设置为它们各自的值。

GET请求

考虑到这种基本模式,Axios GET请求将如下所示:

const apiUrl = ‘你的api地址‘;

axios({ method: ‘get‘, url: `${apiUrl}` });

当API收到请求并处理请求时,将发送响应。该组件需要先以某种方式处理接收到的数据,然后才能在应用程序中使用它。在此示例中,我们在状态中定义了一个名为“ posts”的键,并将其设置为一个空数组。Axios请求是异步的。我们需要通过将“ then”链接到请求的末尾来处理响应。

在then块中,我们可以如下更新组件的状态:

axios({ method: ‘get‘, url: `${apiUrl}` })
  .then(response => {
    this.setState({
      posts: response.data
    })
  });

(PS。如果我们将redux用于状态管理,则可以在‘then‘块中调用调度函数。这样,我们可以将响应数据保存在redux存储中)。

POST请求

对于典型的POST请求,数据将与API请求一起传递。该数据通常可以驻留在组件的状态或Redux存储中。通常,用户希望发布到数据库的数据是从表单获得的。我们将使用handleChange函数更新组件的状态。我们的Axios请求将在handleSubmit函数中发出。

提交表单后,POST请求将发送到API。可以按以下步骤完成:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      post: ‘‘
    }
  }

  handleChange(e) {
    const { value } = e.target;
    this.setState({
      post: value
    });
  }

  handleSubmit(e) {
    e.preventDefault();

    const { post } = this.state;

    axios({
      method: ‘post‘,
      url: `${apiUrl}/posts`,
      data: post
    })
  }

  render() {
    return (
    //  Your form resides here
    );
  }
}

删除请求

DELETE请求类似于POST请求。它们是通过与视图中的按钮交互来完成的。在这种情况下,当单击“删除”按钮时,可以使用handleClick函数发出请求。可以按以下步骤完成:

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [
        {
          id: 1,
          content: ‘The first post‘
        }
      ]
    }
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    const { id } = e.target;
    const apiUrl = ‘你的api地址‘;

    axios({
      method: ‘delete‘,
      url: `${apiUrl}/posts/${id}`
    })

  }

  render() {
    const { posts } = this.state;
    return (
      <div>
        {posts.map(post => (
          <div key={post.id}>
            <p>{post.content}</p>
            <div>
              <input
                type="button"
                id={post.id}
                value="Delete"
                onClick={this.handleClick}
              />
            </div>
          </div>
        ))}
      </div>
    );
  }
}

单击按钮后,将DELETE请求发送到api,并从数据库中删除帖子。为了将此反映在前端,必须发送另一个GET请求以更新组件的状态。

JWT的请求

JWT(JSON Web令牌)可用于对基于Web的应用程序中的用户进行身份验证。这些令牌通常是通过将POST请求发送到正确配置的API来生成的。令牌生成后,将它们存储起来以通过localStorage使用。在这种情况下,令牌将需要构成发出的HTTP请求的一部分。

为了说明这一点,我们将回顾GET请求示例:

const apiUrl = ‘你的api地址‘;
const token = `Bearer ${localStorage.getItem(‘jwt‘)}`;

axios({
  method: ‘get‘,
  url: `${apiUrl}`,
  headers: { Authorization: token }
});

令牌作为传递给Axios调用的对象参数中的另一个键传递。可以通过类似的方式更改POST和DELETE请求,并通过“标头”密钥传递令牌。

那里有。这是对React前端组件中Axios请求的非常简洁的了解。

参考资料:
https://www.objectx.cn/thread-75-1-1.html

原文地址:https://blog.51cto.com/14763751/2481449

时间: 2024-10-31 12:16:04

如何在React中处理REST API请求的相关文章

[译] 如何在React中写出更优秀的代码

目录 我们先来看 Linting 利用组件模块性.复用性和组合性 propTypes 和 defaultProps 知道何时创建新组件 组件 vs 纯组件 vs 无状态函数组件 无状态函数组件 纯组件 使用 React 开发工具 使用内联条件语句 尽可能使用代码片段库 React 本质 - 学习 React 是如何工作的 快速回顾 在React中写出更好代码的9条建议:学习关于 Linting, propTypes, PureComponent 等. Rajat S · 2018 年 4 月 1

如何在QML中使用camera API来拍照

在先前的例程中"如何使用Ubuntu手机平台中的照相机API来存储照片",我们已经展示了如何使用Item的属性来存储我们的照片.在这篇文章中,我们将使用Camera API来完成同样的功能. 我们来直接贴自己的代码: main.qml import QtQuick 2.0 import Ubuntu.Components 1.1 import QtMultimedia 5.0 /*! \brief MainView with a Label and Button elements. *

抛砖引玉:如何在 React 中使用 semantic-ui 的 fixed menu 和 sidebar

semantic-ui 的 fixed menu 和 sidebar 放在 body 中运行的很好(这是 sui 的默认设计),但是在 react 应用中,组件体系都是放在比较深的地方,很难直接放在body中,这时,问题很多. 基本思路:创建一个 sidebar 组件,以此作为 sidebar 的 context,并将内容全部放到 pusher 部分中. 如此构建,会发现很多问题:navbar 和 sidebar 不再是 fixed,显示问题,滚动问题…… 究其原因,是使用了 css3 tran

Android 如何在Eclipse中查看Android API源码 及 support包源码

当我们阅读android API开发文档时候,上面的每个类,以及类的各个方法都是已经写好的方法和控件,可是我们只是在搬来使用,不知道它的原理,它是如何被实现的.android系统是开源的,所以谷歌官方在每发布一个版本的时候都会放出它对应的API源码的,让我们可以深入了解android的API实现过程,这就是开源的魅力.如果我们从API源码的角度去了解了开发过程,那样对于作为开发人员的我们,便会对他有更深入的体会,有助于日后的软件开发. 比如查看Activity的源码,如图 也可以查看系统方法怎么

【转】Android 如何在Eclipse中查看Android API源码 及 support包源码

原文网址:http://blog.csdn.net/vipzjyno1/article/details/22954775 当我们阅读android API开发文档时候,上面的每个类,以及类的各个方法都是已经写好的方法和控件,可是我们只是在搬来使用,不知道它的原理,它是如何被实现的.android系统是开源的,所以谷歌官方在每发布一个版本的时候都会放出它对应的API源码的,让我们可以深入了解android的API实现过程,这就是开源的魅力.如果我们从API源码的角度去了解了开发过程,那样对于作为开

React中异步模块api React.lazy和React.Suspense

React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件. 然后应在 React.Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等). 比如: const OtherComponent = React.lazy(() => import('./OtherC

演示如何在 WebForm 中提供 web api 服务

Global.asax.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Routing; using System.Web.Security; using System.Web.SessionState; using System.Web.Http; namespace WebApiWebFormHost { public class

如何在react中实现一个table切换?

废话不说,直接贴代码,供新手参考 export default class TabComponent extends Component { constructor(props){ super(props); this.state = { }; } render(){ return ( <TabController> <div name="one"> 第一部分 </div> <div name="two"> 第二部分

React中使用百度地图API

今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用create react app 创建的(以下所有操作都在该基础上进行) 1.去百度地图登录 http://lbsyun.baidu.com/ 2.获取密钥 登录后在右上角的控制台里面申请(由于这个我早已申请过了,就不给大家演示了,大家照着它的提示走就可以了) 3.拿到密钥后,将百度API的scri