react中post请求远程控制数据信息的四种方式有什么-JAVA编程网

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 是最受欢迎的专业术语，我还在下边也探讨了许多好的取代名字，如 client 或 api。

关键点是，全部的 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