React发送请求

最新推荐文章于 2024-05-16 17:00:42 发布
最新推荐文章于 2024-05-16 17:00:42 发布
阅读量7.9k 收藏 6
点赞数 2
分类专栏： React教程系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenglixiong123/article/details/82564416
版权

1.axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax_Axios</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
    <script src="../common/axios/axios.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    class AxiosComponent extends React.Component{

        state = {
            repoName:'',
            repoUrl:''
        };

        componentDidMount(){
            console.log("componentDidMount---->");
            //axios发送请求
            const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
            console.log("loading data...");
            let promise = axios.get(url);
            promise.then(response=>{
                console.log(response);
                const result = response.data;
                const {name,html_url} = result.items[0];
                this.setState({
                    repoName:name,
                    repoUrl:html_url
                })
            });
        }

        render(){

            const {repoName,repoUrl} = this.state;

            if(!repoName){
                return <h2>Loading...</h2>
            }
            return(
                <div>
                    <h2>Most start is<a href={repoUrl}>{repoName}</a></h2>
                </div>
            )
        }

    }
    ReactDOM.render(<AxiosComponent />, document.getElementById('app1'));


</script>


</body>
</html>

2.fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax_Fetch</title>
    <script src="../common/react/development.js"></script>
    <script src="../common/react-dom/development.js"></script>
    <script src="../common/babel.js"></script>
    <script src="../common/prop-types.js"></script>
    <script src="../common/axios/axios.js"></script>
</head>
<body>

<div id="app1"></div>

<script type="text/babel">

    class AxiosComponent extends React.Component{

        state = {
            repoName:'',
            repoUrl:''
        };

        componentDidMount(){
            console.log("componentDidMount---->");
            //axios发送请求
            const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
            console.log("loading data...");

            // const type = 'axios';
            const type = 'fetch';
            console.log(`请求类型为：${type}`);
            if(type==='axios') {
                let promise = axios.get(url);
                promise.then(response => {
                    console.log(response);
                    const result = response.data;
                    const {name, html_url} = result.items[0];
                    this.setState({
                        repoName: name,
                        repoUrl: html_url
                    })
                }).catch(err => {
                    console.log(err);
                });
            }else if(type==='fetch') {
                //fetch发送请求
                fetch(url).then(response => {
                    console.log('response', response);
                    return response.json();
                }).then(data => {
                    console.log('data', data);
                    const {name, html_url} = data.items[0];
                    this.setState({
                        repoName: name,
                        repoUrl: html_url
                    })
                });
            }
        }

        render(){

            const {repoName,repoUrl} = this.state;

            if(!repoName){
                return <h2>Loading...</h2>
            }
            return(
                <div>
                    <h2>Most start is<a href={repoUrl}>{repoName}</a></h2>
                </div>
            )
        }

    }
    ReactDOM.render(<AxiosComponent />, document.getElementById('app1'));


</script>


</body>
</html>

 

花生糖葫芦侠
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react的网络请求数据 get 请求实现方法
weixin_45301448的博客
01-31 7240
首页我直接把请求过来的参数直接放在了生命周期函数里面 下面是请求到的数据 然后我们需要把数据遍历到页面上，需要设定一个变量 banners: [’’] 用来接收请求的数据，渲染到页面上 constructor(){ super(); this.state = { banners: [''] } } componentDidMount(){ f...
React之初识fetch 通过fetch发送一个简单GET请求
weixin_45966674的博客
10-20 1228
fetch并不需要引入 我们直接在项目中使用即可 然后在componentDidMount生命周期中发送了一个网络请求 因为我们并没有说声明类型 因此 他默认为get请求。可以看到 这样我们的请求就回来了 然后 这里 我们用then方法监听了请求成功的事件 并将结果打印在了控制台 那么我们去控制台上看一下。这是我们会发现 控制台打印了请求状态和一些信息 但我们想要的是请求返回回来的参数 而不是这些信息 我们可以这样写。这是 我们的请求上就带了三个参数。然后再去控制台看网络。
React和Next.js开发常见的HTTP请求方法
最新发布
kjl536566的博客
05-16 527
不过，这些缺点并不是 axios 本身的问题，而是它作为一个专注于发送 HTTP 请求的库所设计的初衷。对于状态管理和错误处理，你可以结合其他库（如 Vuex、Redux、React Query 等）来实现更完整的功能。总的来说，axios 是一个强大且灵活的 HTTP 客户端库，它为你提供了很多方便的功能，并且与各种前端框架和库都有良好的兼容性。一款专门为处理数据获取和状态管理设计的库，具有错误处理，加载状态，缓存等功能。post等其他请求，支持直接传递请求头和请求体，语法更简洁。
react native中使用fetch做get请求和post请求
徐同保的专栏
04-02 1029
get请求： import React, { useState, useRef, useEffect } from 'react' import { View, TextInput, Text, Button } from 'react-native' import style from './static/style' export default function App() { const [username, setUsername] = useState('admin') const
React Native Get,Post请求
gaiyaguang的博客
05-05 2879
React Native为我们提供了fetch框架进行网络请求。Fetch请求static async request(url, method, body, params) { DEBUG && console.log("#REQUEST NetUtil# [" + method + "] url=" + url + ",body=" + body); var tim
react发送fetch请求get和post
qq_40011214的博客
02-10 1149
import React from 'react'; import qs from 'querystring' import api from './api' export default class App extends React.Component { constructor(props){ super(props); } componentDidMount...
react-request：React的声明性HTTP请求
02-03
React请求 对React的声明性HTTP请求。动机在JavaScript中发出单个HTTP请求并不困难。 但是，当用户浏览应用程序时，复杂的Web应用程序通常会发出许多请求。 请求重复数据删除和响应缓存之类的功能通常可以使诸如此类...
React Native 使用Fetch发送网络请求的示例代码
08-28
React Native 使用 Fetch 发送网络请求的示例代码 在 React Native 中，发送网络请求是非常常见的操作。Fetch API 是 React Native 提供的一种实现 HTTP 请求的方式。在这篇文章中，我们将讲解如何使用 Fetch API ...
React请求
02-10
在React开发中，进行数据请求是必不可少的一部分，它使得我们可以从服务器获取数据并渲染到页面上。本主题将深入探讨React中的请求技术，主要聚焦于JavaScript的实现方式，特别是使用fetch API和第三方库如axios。 ...
详解React Native 采用Fetch方式发送跨域POST请求
11-30
Fetch以后是趋势，势必要取代传统的Ajax，而且RN框架...//发送Ajax请求 sendAjax(){ //POST方式,IP为本机IP fetch("http://192.168.111.102:8085", { method: "POST", mode: "cors", headers: { "Content-Type
get && post 请求接口（基于 react ）
hello_luffy的博客
03-14 2007
get && post 请求接口 get 和 post 都可以在拦截数据的时候携带数据，那么，他们的相同点和区别是什么？ 请求数据时传递实参的格式 服务器接受实参的固定变量名（形参） 数据在服务器存储的类型 请求完毕后返回的值 返回数据的方式 get {params:{}} req.query 字符串 Promise res.send({}) /res.json({}) post {} req.body 对象 Promise res.send({}) /res.json
react-native-tcp-socket:使用客户端SSLTLS支持对适用于Android，iOS和macOS的本机TCP套接字API进行React
05-05
react-native-tcp-socket 使用客户端SSL / TLS支持对Android，iOS和macOS的本机TCP套接字API进行React。 它允许您创建TCP客户端和服务器套接字，以模仿Node的API功能（有关更多信息，请参见可用的 ）。 目录 SSL客户端 原料药 TcpSocket createConnection() 服务器listen() 维护者 致谢 执照 入门 使用任一Yarn安装库： yarn add react-native-tcp-socket 或npm： npm install --save react-native-tcp-socket 覆盖net 由于react-native-tcp-socket提供与Node的net相同的API，因此如果要将此模块导入为net或在JavaScript中使用require('net') ，则必须将
React 演示Hook中发送网络请求
weixin_45966674的博客
06-19 1396
这里 我们先定义了一个str 然后通过useEffect 发送fetch请求 地址是 /books 我们刚才说过 代理那里配了 /books 会匹配上。duta 拿到请求中的json 然后 将请求json中的name 通过我们创建时定义的 setStr 赋值给str。一定不要盲目的去写这个啊 我的这个配置的意思是 当识别到请求中包含 /books。当我访问 http://localhost:8080/books。那么 我们接口返回的json中的name 是。
react用axios的 get/post请求/获取数据
weixin_46353030的博客
03-13 6612
一、Post 通式 axios.post('api地址',待传入的参数) .then(function (response) { //handle success data }) .catch(function (error) { //handle error satuation console.log(error) }) } 应用 第二个参数第一种写法：直接传字符串 const posts_ = 'https://www.fastm
react中发送请求-学习笔记
anne_IT_blog的博客
02-12 5707
react中发送请求
react——网络请求
阿牛哥的博客
09-21 680
react——网络请求
react项目umi-request函数发送数据的两种方法
hzxOnlineOk的博客
03-03 902
body传 请求完整地址： http://localhost:8888/api/live/manager/saveTab?t=1614770850115 用法 // 新增/编辑栏目 export async function saveTab(params: any) { return request('/live/manager/saveTab', { method: 'POST', data: { ...params }, }); } url传递数据 请..
Facebook React.js库 入门实例教程
weixin_33901641的博客
04-14 97
作者：阮一峰 日期：2015年3月31日 现在最热门的前端框架，毫无疑问是React。 上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网...
Reactor实战-百万TCP连接
qq_38731735的博客
11-17 666
水平触发： 小数据 listenfd：水平触发 边缘触发： 数据量比较大 分界点： 取决于，一次性能否读完数据：一次读完小数据；否则是大数据 修改fd数量： ulimit -a 协议栈：/etc/sysctl.cof net.ipv4.tcp_mem = 262144 524288 786432 net.ipv4.tcp_wmem= 1024 1024 2048 net.ipv4.tcp_rmem = 1024 1024 2048 1 100listenfd, 分别放在不同的线程 2 监听一个端口：88
react ajax请求
08-18
在React中进行AJAX请求通常使用现代的fetch API或者axios库。 使用fetch API的示例代码如下： ...请注意，这些代码应该在React组件的生命周期方法或React Hooks中执行，以确保在正确的时机发送请求和处理响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花生糖葫芦侠

创作不易，请多多支持！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值