React之初识fetch 通过fetch发送一个简单GET请求

我们先创建一个React项目 然后我们直接把代码写在App.jsx里了

import './App.css';
import React from "react";

class App extends React.Component{
    
    
  constructor(props){
    
    
    super(props);
    this.state = {
    
    
    }
  }

  componentDidMount(){
    
    
    fetch("http://194.137.4.126/GOM/login/getSSOInfo").then((res)=>{
    
    
      console.log(res);
    }).catch((err)=>{
    
    
      console.log(err);
    })
  }
 
  render(){
    
    
    return (
      <div className="App">
        你好
      </div>
    )
  }
}

export default App;

fetch并不需要引入 我们直接在项目中使用即可 然后在componentDidMount生命周期中发送了一个网络请求 因为我们并没有说声明类型 因此 他默认为get请求
请求地址的话 我这个是内网的地址你们是访问不到的
你们可以直接去找一个可以请求的GET接口 但不能跨域
因为这篇文章我先不讲跨域的解决方法

运行项目

可以看到 这样我们的请求就回来了 然后 这里 我们用then方法监听了请求成功的事件 并将结果打印在了控制台 那么我们去控制台上看一下

这是我们会发现 控制台打印了请求状态和一些信息 但我们想要的是请求返回回来的参数 而不是这些信息 我们可以这样写
将 componentDidMount的数据改成

componentDidMount(){
    
    
fetch("http://194.137.4.126/GOM/login/getSSOInfo")
  .then(res => res.json()).then(data=>{
    
    
    console.log(data);
  }).catch((err)=>{
    
    
    console.log(err);
  })
}

这样一转就好了 然后我们查看控制台

就打印出了我们的接口返回数据

然后我们看控制台

目前我们请求是没有任何参数的
我们将 componentDidMount改成

componentDidMount(){
    
    
fetch("http://194.137.4.126/GOM/login/getSSOInfo?index=1&aios=size&page=1")
  .then(res => res.json()).then(data=>{
    
    
    console.log(data);
  }).catch((err)=>{
    
    
    console.log(err);
  })
}

然后再去控制台看网络

这是 我们的请求上就带了三个参数

这只是一个简单的get请求 后续我会更文 讲解 post请求 跨域解决方法等知识点