react 处理fetch网络请求

今天药忘吃喽~ 2021-07-24 22:03 427阅读 0赞

1、通过node.js搭建服务器,且必须有跨域请求
    2、php搭建的不行,估计是跨域的问题
    3、在页面渲染后的componentDidMount()生命周期函数中发送请求

代码示例:

**react.js文件**

import React ,{ Component}from 'react';
    import User from './user'
    
    class App extends React.Component { 
    
      constructor()
      { 
        super();
    
      }
      componentDidMount()
      { 
        var flag=false;
        if(flag)
        { 
          fetch('http://localhost:3000/news')
          .then(data=>{ return data.json()})
          .then(res=>{ console.log(res)})
        }else{ 
    
          fetch('http://localhost:3000/news',{ 
            method:'POST',
            headers:{ 
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
            },
            body:"id=jeff"
    
          }).then(data=>{ return data.json()})
          .then(res=>{ console.log(res)})
        }
      }
    
    
      render(){ 
         
          return (
                <div className="App">
                <User />
              </div>
          );
      }
    }
    
    export default App;

node.js文件

var express=require('express');
    var bodyParser = require('body-parser');
    var app = express();
    var urlencodedParser = bodyParser.urlencoded({  extended: false });
    //创建服务器
    var app=express();
    
    
    //开启服务器并监听端口
    app.listen(3000,function(){ 
        console.log('this express server is running at http://127.0.0.1:3000 ');
    
    })
    
    app.get('/', function (req, res, next) { 
        
    
    });
    
    app.get('/news', function (req, res, next) { 
        res.set('Access-Control-Allow-Origin', '*');
    
    
        var news = { 
            id: 1,
            title: 'news title1...',
            content: 'news content1...',
            commentsUrl: '/comments?newsId='
        };
        res.json(news);
    
    });
    
    app.post('/news',urlencodedParser, function (req, res, next) { 
        res.set('Access-Control-Allow-Origin', '*');
        var id=req.body.id;
    
    
        var news = { 
            id: id,
            title: 'news title1...',
            content: 'news content1...',
            commentsUrl: '/comments?newsId='
        };
        res.json(news);
    
    });
    
    
    
    module.exports=app;

发表评论取消回复

表情：

评论列表（有 0 条评论，427人围观）

还没有评论，来说两句吧...

相关阅读

相关 AJAX发送网络请求-封装AJAX-Fetch发送网络请求

文章目录 1.AJAX网络请求 1.1 AJAX发送请求 1.2 XHR的状态 1.3 XHR

秒速五厘米/ 2023年09月28日 13:49/ 0 赞/ 24 阅读

相关前端 - Fetch网络请求 - 学习/实践

1.应用场景 <table> <tbody> <tr> <td>主要用于前端向后端服务发送请求, 含跨域请求.</td> </tr> </tbod

墨蓝/ 2022年12月31日 15:21/ 0 赞/ 160 阅读

相关 react网络请求使用http-proxy-middleware配置路由转发 fetch

一、网络请求 ajax、axios、fetch 1.配置代理 (1)直接修改package.json 在react项目的package.json中增加一个代理转

╰半夏微凉°/ 2022年12月05日 15:27/ 0 赞/ 394 阅读

相关鸿蒙开发-使用fetch发起网络请求

场景鸿蒙基于JS搭建HelloWorld并修改国际化文件： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/

ゝ一纸荒年。/ 2022年10月12日 04:19/ 0 赞/ 295 阅读

相关 react-native网络请求fetch

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

矫情吗；*/ 2022年05月22日 10:12/ 0 赞/ 260 阅读

相关 react 运用 fetch 请求数据

componentDidMount(){ fetch('服务器接口').then(res=>{ if(res.ok){

曾经终败给现在/ 2022年02月27日 05:42/ 0 赞/ 272 阅读

相关 react-native系列(22)API篇：网络状态NetInfo与网络请求Fetch详解

网络状态NetInfo NetInfo库的作用是检测当前是否联网及获取联网方式及网络牌照等信息。要使用NetInfo库，需要先在AndroidManifest.xml

末蓝、/ 2021年09月18日 11:40/ 0 赞/ 611 阅读

相关 React进行服务器端数据请求---fetch

get请求静态数据不方便修改，而且只能通过本页面进行修改 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <m

╰+哭是因爲堅強的太久メ/ 2021年09月15日 15:30/ 0 赞/ 312 阅读

相关 react 处理fetch网络请求

1、通过node.js搭建服务器,且必须有跨域请求 2、php搭建的不行,估计是跨域的问题 3、在页面渲染后的componentDidMount()生命

今天药忘吃喽~/ 2021年07月24日 22:03/ 0 赞/ 428 阅读

相关 fetch 处理网络请求

(1)基本使用 get请求 fetch('路径') //返回响应对象,并要求为json格式 .then(dat

落日映苍穹つ/ 2021年07月24日 11:35/ 0 赞/ 435 阅读