WWW.lllT.neT

post请求远程控制数据信息的四种方式:1、立即在React部件中开展HTTP读取并解决回应;2、建立一个文件夹名称,把开展HTTP读取的涵数都装进去,集中化post请求数据信息并解决回应;3、自定Hook来post请求数据信息;4、应用“react-query”或swr来post请求数据信息。

本实例教程实际操作自然环境:Windows7系统软件、react17.0.1版、Dell G3电脑上。

React 中post请求远程控制数据信息的四种方式

React 是一个潜心的组件库。因而,它对怎样post请求远程控制数据信息没什么提议。假如要根据 HTTP post请求数据信息并将其发送至 Web API,可以选择下边四种方式。

  • 内联书写

  • 规范化管理

  • 自定 Hook

  • react-query/swr

留意:在这篇文章中,我将应用 fetch 开展 HTTP 读取,可是这种方式也适用 Axios 这类的代替方式。此外,假如你应用的是 GraphQ L,还能够考虑到应用 Apollo 这类的别的非常好的挑选。这篇文章假定你已经读取传统式的 REST API。

方法1:内联

这也是非常简单,最立即的挑选。在 React 部件中开展 HTTP 读取并解决回应。

fetch("/users").then(response => response.json());

看上去非常简单。可是这一实例忽视了载入情况,处理错误,申明和设定有关情况等。在现实世界中, HTTP 读取看上去更像那样。

import React, { useState, useEffect } from "react";

export default function InlineDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
      .then(response => {
        if (response.ok) return response.json();
        throw response;
      })
      .then(json => {
        setUsers(json);
      })
      .catch(err => {
        console.error(err);
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Oops!";
  return users[0].username;
}

针对一个简洁的应用软件,只需进行好多个post请求,就可以一切正常工作中。可是上边的情况申明和 useEffect 全是模板。假如我想开展很多 HTTP 读取,我不想为每一个读取反复和维护保养大概 20 行编码。内联读取使你的编码越来越难看。

看一下我们要处理的一些问题:

  • 申明载入情况

  • 申明不正确情况

  • 将不正确打印出到控制面板

  • 查验回应是不是根据回到 200 response.ok

  • 假如回应一切正常,将回应变换为 json 并回到 promise

  • 假如回应有误,抛出去不正确

  • finally 中掩藏载入情况,以保证 Loading 即使有不正确也被掩藏

  • 申明一个空的依靠项二维数组,便于 useEffect 只运作一次

这只不过是一个简洁的实例,它忽视了很多别的有关问题。

方法2:文件夹名称规范化管理

如果我们在一个文件夹名称中解决全部 HTTP 读取会怎么样? 应用这些方式,大家使用了一个名叫 services 的文件夹名称,而且把开展 HTTP 读取的涵数都装进去。service 是最受欢迎的专业术语,我还在下边也探讨了许多好的取代名字,如 clientapi

关键点是,全部的 HTTP 读取全是根据纯 JavaScript 涵数解决的,储存在一个文件夹名称中。这是一个集中化的 getUsers 涵数:

export function getUsers() {
  return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
    response.json()
  );
}

下边是对 getUsers 涵数的读取:

import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";

export default function CentralDemo() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    getUsers()
      .then(json => {
        setUsers(json);
        setLoading(false);
      })
      .catch(err => {
        console.error(err);
        setError(err);
      });
  }, []);

  if (loading) return "Loading...";
  if (error) return "Oops!";
  return users[0].username;
}

殊不知这并没太简单化post请求读取。关键的益处是它可以强制性一致地解决 HTTP 读取。其观念是如此的:当相关函数一起解决时,更非常容易一致地解决他们。假如 userService 文件夹名称中充满了开展 HTTP 读取的涵数,那样我能轻易地保证他们始终如一地那样做。除此之外,假如读取被重复使用,则非常容易从这一集中化部位读取他们。

殊不知,大家还能够做得更强。

方法3:自定Hook

依靠 React Hooks 的魔法,大家总算可以集中化运输反复的逻辑性。那样怎样建立一个自定 useFetch 勾子来简单化大家的 HTTP 读取呢?

import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const prevInit = useRef();
  const prevUrl = useRef();

  useEffect(() => {
  // Only refetch if url or init params change.
    if (prevUrl.current === url && prevInit.current === init) return;
    prevUrl.current = url;
    prevInit.current = init;
    fetch(process.env.REACT_APP_API_BASE_URL   url, init)
      .then(response => {
        if (response.ok) return response.json();
        setError(response);
      })
      .then(data => setData(data))
      .catch(err => {
        console.error(err);   setError(err);
      })
      .finally(() => setLoading(false));
  }, [init, url]);

  return { data, loading, error };
}

你的很有可能看上去不一样,但我觉得这一基本上的操作方法很有效。这一 Hook 巨大地简单化了全部读取。看一下应用这一 Hook 必须是多少编码 :

import React from "react";
import useFetch from "./useFetch";

export default function HookDemo() {
  const { data, loading, error } = useFetch("users");
  if (loading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

针对很多应用软件,你只要一个如此的自定Hook。可是这一Hook早已很繁杂了,而且它排除了很多问题。

可是也有许多企业沒有充分考虑的点:缓存文件?、假如手机客户端的衔接不靠谱,怎样再次获得?你要在客户再次调节标识时再次获得新数据吗?怎么消除反复查看?

你能逐步完善这一自定Hook来实现全部这类实际操作。可是,您应当只必须方法4:

方法4:react-query/swr

应用 react-query或swr,可以为大家解决缓存文件、再试、反复查看这些。我无须维护保养自身的自定Hook了。并且每一个 HTTP 读取都必须非常少的编码:

import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";

export default function ReactQueryDemo() {
  const { data, isLoading, error } = useQuery("users", getUsers);
  if (isLoading) return "Loading...";
  if (error) return "Oops!";
  return data[0].username;
}

针对大部分应用软件而言,今日这是我的优选。这也是详细的编码:https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug,你能自身开展较为。

建议学习培训:《react视频教程》

以上便是react中post请求远程控制数据信息的四种方式有什么的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:react中post请求远程控制数据信息的四种方式有什么发布于2021-12-08 10:09:01