React 演示Hook中发送网络请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 演示Hook中发送网络请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我这里本地用java写了个接口
React 演示Hook中发送网络请求
当我访问 http://localhost:8080/books
就会发出一个无惨的 get请求返回内容如下

这里我返回了一个 json对象
然后我们在react项目的src目录下创建setupProxy.js
参考代码如下

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
 		// 可以配置多个代理
    proxy.createProxyMiddleware('/books', {
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  )
}

一定不要盲目的去写这个啊我的这个配置的意思是当识别到请求中包含 /books
就将地址代理为 http://localhost:8080+原有请求地址
这种代理的情况下能够解决跨域问题

然后编写页面组件代码如下

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

const MyComponent = () => {
  const [str,setStr] = useState(null);
 

  useEffect(() => {
    (async ()=> {
      const response = await fetch("/books");
      const duta = await response.json();
      setStr(duta.name);
    })()
  },[])

  return (
    <div>
      { str?str:"暂无内容" }
    </div>
  );
};

export default MyComponent;

这里我们先定义了一个str 然后通过useEffect 发送fetch请求地址是 /books 我们刚才说过代理那里配了 /books 会匹配上
useEffect第二个参数是个空数组表示我们不需要监听任何数据的变化
duta 拿到请求中的json 然后将请求json中的name 通过我们创建时定义的 setStr 赋值给str
那么我们接口返回的json中的name 是
React 演示Hook中发送网络请求
启动项目运行结果如下

也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-496281.html