React学习【04】React Ajax的使用

最新推荐文章于 2024-08-05 11:37:51 发布
最新推荐文章于 2024-08-05 11:37:51 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 【30】React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1336037686/article/details/85505391
版权

React Ajax的使用

文章目录

1. React Ajax

  • React本身只关注于界面, 并不包含发送ajax请求的代码
  • 前端应用需要通过ajax请求与后台进行交互(json数据)
  • react应用中需要集成第三方ajax库(或自己封装)

2. 常用的Ajax请求库

  • jQuery: 比较重, 如果需要另外引入不建议使用
  • axios: 轻量级, 建议使用
    • 封装XmlHttpRequest对象的ajax
    • promise风格
    • 可以用在浏览器端和node服务器端
  • fetch: 原生函数, 但老版本浏览器不支持
    • 不再使用XmlHttpRequest对象提交ajax请求
    • 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

3. axios

文档：https://github.com/axios/axios

  • get
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  • post
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/prop-types.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
  /*
  需求:
    1. 界面效果如下
    2. 根据指定的关键字在github上搜索匹配的最受关注的库
    3. 显示库名, 点击链接查看库
    4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
  */
  axios.get("https://api.github.com/search/repositories?q=r&sort=stars")
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      alert(error.message)
    })
</script>
</body>
</html>

4. fetch

文档：

https://github.github.io/fetch/

https://segmentfault.com/a/1190000003810652

  • get
fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});
  • post
fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/prop-types.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
</head>
<body>

<script type="text/babel">
  fetch('https://api.github.com/search/repositories?q=r&sort=stars', {method: "GET"})
  //固定写法
    .then(
    response => response.json()
  )
  //获取数据
  .then(data => {
    console.log(data)
    //判断是否出错
    if(data.message) {
      alert(`请求失败: ${data.message}`)
    } else {
      const repo = data.items[0]
      alert(JSON.stringify(repo))
    }
  })
</script>
</body>
</html>

5. 综合案例

5.1 案例1

需求:

  1. 界面效果如下

  2. 根据指定的关键字在github上搜索匹配的最受关注的库

  3. 显示库名, 点击链接查看库

  4. 测试接口: https://api.github.com/search/repositories?q=r&sort=stars

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/prop-types.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

  class App extends React.Component {

    state = {
      name : '',
      url : ''
    }

    componentDidMount(){
      const {name} = this.props;
      axios.get("https://api.github.com/search/repositories?q=" + name + "&sort=stars")
        .then(response => {
          const repo = response.data.items[0]
          console.log(repo);
          this.setState({
            name:repo.name,
            url:repo.html_url
          })
        })
        .catch(error => {
          alert("请求失败，" + error.message)
        })
    }

    render() {
      const {name,url} = this.state
      if(!name) {
        return <h2>loading...</h2>
      } else {
        return (
          <h2>
            most star repo is <a href={url}>{name}</a>
          </h2>
        )
      }
     }
  }

  ReactDOM.render(<App name="react"/>, document.getElementById('example'));
</script>
</body>
</html>

结果：

在这里插入图片描述

5.1 案例2

案例地址 ： react-learn-demo/class_02/class-demo-04-github

5.1.1 组件拆分

在这里插入图片描述

5.1.2 基本步骤

  1. 编写静态组件
  2. 实现动态数据

5.1.3 环境安装

npm install axios
npm install prop-types

5.1.4 基本结构

在这里插入图片描述

5.1.5 具体代码

5.1.5.1 index.js
import React,{Component} from 'react'
import ReactDOM from 'react-dom'

import './index.css'
import App from './components/app'

ReactDOM.render(<App />, document.getElementById('root'));
5.1.5.2 app.jsx
import React, {Component} from 'react'

import Search from './search'
import List from "./list";

export default class App extends Component {

  state = {
    searchName: ''
  }

  setSearchName = (name) => {
    this.setState({
      searchName: name
    })
  }

  render() {
    return (
      <div>
        <div id="app">
          <div className="container">
            <Search setSearchName={this.setSearchName}/>
            <List searchName={this.state.searchName}/>
          </div>
        </div>
      </div>
    )
  }
}
5.1.5.3 search.jsx
import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Search extends Component {

  static propTypes = {
    setSearchName: PropTypes.func.isRequired
  }

  submitSearchName = () => {
    const inputValue = this.input.value;
    this.props.setSearchName(inputValue)
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input type="text" placeholder="enter the name you search" ref={input => this.input = input }/>
          <button onClick={this.submitSearchName}>Search</button>
        </div>
      </section>
    )
  }
}
5.1.5.4 list.jsx
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'

import Card from './card'

export default class List extends Component {

  state = {
    firstView: true,
    loading: false,
    users: [],
    error: null
  }

  static propTypes = {
    searchName:PropTypes.string.isRequired
  }

  async componentWillReceiveProps(nextProps){
    const {searchName} = nextProps
    //正在加载
    this.setState({
      firstView : false,
      loading : true
    })
    //发送请求
    axios.get("https://api.github.com/search/repositories?q=" + searchName + "&sort=stars")
      .then(response => {
        this.setState({
          loading : false,
          users : response.data.items
        })
      })
      .catch(error => {
        console.log(error.message);
        this.setState({
          loading : false,
          error : error.message
        })
      })
  }

  render() {
    if (this.state.firstView) {
      return <h2>Enter name to search</h2>
    } else if (this.state.loading) {
      return <h2>Loading result...</h2>
    } else if (this.state.error) {
      return <h2>{this.state.error}</h2>
    } else {
      return (
        <div className="row">
          {
            this.state.users.map((user,index) => (
              <Card user={user} key={index}/>
            ))
          }
        </div>
      )
    }
  }
}
5.1.5.5 card.jsx
import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Card extends Component {

  static propTypes = {
    user:PropTypes.object.isRequired
  }

  render() {
    const {user} = this.props
    return (
      <div className="card" key={user.html_url}>
        <a href={user.html_url} target="_blank">
          <img src={user.owner.avatar_url} style={{width: '100px'}} alt='user'/>
        </a>
        <p className="card-text">{user.name}</p>
      </div>
    )
  }
}
5.1.5.6 运行结果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

LGX_TvT
关注
专栏目录
React---发送Ajax请求
lelara的博客
04-22 935
1. 理解 1.1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装) jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 1.2. 常用的ajax请求库 1)封装XmlHttpRequest对象的ajax 2)p...
React学习(九)-React中发送Ajax请求以及Mock数据
itclanCoder
09-30 3523
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文| 川川VX-ID:suibichuanji点击文末左下方阅读原文,可看视频内容 前言在React中,render函数返回的结果,取决于组件的props和state我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到...
React--》在React中发送Ajax请求
ztK63LrD的博客
01-23 900
React，并，前端应用需要通过ajax请求与后台进行交互(json数据)。react应用中需要集成第三方ajax库(或自己封装)。常用的Ajax请求库，且建议使用的是axios：其封装了XMLHttpRequest对象的ajax，其具有promise风格，可以用在浏览器端和node服务器端。
React 中的 Ajax 请求：最佳生命周期选择及其原因
最新发布
My_wife_QBL的博客
08-05 415
本文将探讨 React 的生命周期方法，以及在这些方法中发出 Ajax 请求的最佳实践和原因。通过合理选择生命周期方法并遵循最佳实践，可以构建出高效和用户友好的 React 应用，确保数据请求的正确性和可靠性。理解生命周期的工作原理以及 Ajax 请求的最佳实践，将帮助开发者在构建 Web 应用时更好地管理数据和状态，提升用户体验。组件的状态更新应在生命周期的适当方法中进行。是发出 Ajax 请求的首选位置，但在某些情况下，可能需要在组件更新时（即 props 或 state 发生变化时）发出请求。
如何在React中做Ajax 请求？
JeremyYong的博客
08-05 1万+
如何在React中做Ajax 请求？ 首先：React本身没有独有的获取数据的方式。实际上，就react而言，它甚至不知道有服务器画面的存在。 React只是简单地渲染组件，单独从两个地方获取数据：props 和 state。 因此，为了使用服务器的数据，你需要在你的组件（component）的props或state里拿到数据。 你可以将这个过程与服务和数据模型复杂化，就像
React-发送ajax请求
m0_72658000的博客
06-02 106
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1292
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
react中的ajax封装实例详解
08-29
实现 React 中的 Ajax 封装实例可以使用 JavaScript 对象来定义参数和实现方法。以下是一个简单的示例代码： ```javascript let configResText = function (responseText, resTextType){ return resTextType == '...
React AJAX
12-13
React AJAX 是一种在React应用程序中实现数据异步加载和更新的方法。它利用React生命周期方法以及Ajax（Asynchronous ...正确地结合使用React生命周期方法和Ajax技术，可以高效、可靠地获取并更新组件的数据。
React基础-React中发送Ajax请求以及Mock数据
lt_xiaodou的博客
09-08 1182
前言在React中,render函数返回的结果,取决于组件的props和state我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面上 ,那么应该在哪个生命周期函数中发起请求?又如何发起Ajax请求呢以及有哪些方式?以及我们怎么样模拟一个后端数据接口?示例API返回如下json对象假如后端返回的商品列表如下所示{{"id": 1, "name": "瓜子", "price": 10, "address": "广东"},
【React】归纳篇（八）在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
09-13 5324
在React中发送Ajax请求-axios的使用 React本身不包含发送Ajax的代码，一般使用第三方的库。如axios，这是专门用于ajax请求的库。其封装了XmlHttpRequest对象的ajax,且使用promise风格写法，在浏览器的客户端与服务端都能使用。 你可能会想问为什么不用fetch()原生函数呢？因为考虑到对老版本浏览器的支持情况。 其次，fetch（）不使用X...
【React】两种方式发送异步ajax请求
zqq_2016的博客
10-18 995
说明： 1）React本身只关注于界面，并不包含发送ajax请求的代码； 2）前端应用需要通过ajax请求与后台进行交互（json数据） 3）react应用中需要集成第三方ajax库（或自己封装） 一、axios 封装XmlHttpRequest对象的ajax promise风格 可以在浏览器端和node服务器端 1. 下载axios cnpm i axios --save 2. 引入axios import axios from 'axios' 3. 使用axios ...
react 何时发送ajax,请问如何在React中做Ajax 请求？
weixin_42356139的博客
08-06 275
呼唤远方用sinon.sub可以模拟ajax请求，不需要服务器的测试，整个世界都清静了。以下介绍了如何用sinon.sub模拟ajax请求的成功和失败的情况。Filesapp/src/PackageInfo.jsapp/test/PackageInfo-test.jsPackageInfo-test.jsvar $ = require('jquery');var React = require('...
React AJAX 请求的5种方案
热门推荐
赵英超的博客
09-08 1万+
jQuery $.ajax 这是一个快速又粗暴的方案。在旧版本的官方 React 教程（official React tutorial）中，他们使用了 jQuery $.ajax 来示范如何从服务器获取数据。如果你是刚刚开始学习和把玩 React，jQuery 可以节省你大量入门和开发的时间，因为我们都对 jQuery 非常熟悉了。这是 jQuery 实现 AJAX 的例子： loadCom...
后端程序员入门react笔记（五）ajax请求
qq_39962403的博客
02-23 1108
axios提供了请求拦截器和响应拦截器，帮助我们在请求前对config做一些配置，判断是否重复提交，或者对config做一些检查以及配置纠正等，响应拦截器帮助我们根据不同的返回内容做不同的数据处理，相关案例如下。我们知道，我们前端的服务器是3000端口，但是我们后端的服务器不一定是3000，也可能是80端口，现在我启动一个go编写的后台服务，调用一下接口。axios提供了两种方式来发送请求， 一种是通过axios(config)来发送请求，另一种就是上面列子中的axios.get，
react中发送请求-学习笔记
anne_IT_blog的博客
02-12 5855
react中发送请求
react ajax
fang.lovest.yang的博客
10-24 3038
一、基础说明 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入，不建议使用。react的核心就是减少dom操作，仅操作数据，然后更新到dom。jquery库大，比较重，且主要来操作dom，故不适用react中。 axios: 轻量级, 建议使用。可以专门学习这个课程 ...
在 React 如何实现AJAX 请求？实现 AJAX请求的方案！
weixin_45378258的博客
07-14 512
jQuery 的$.ajax有学习过前端的小伙伴都知道在前端框架 react 是如今比较受欢迎的，而且是比较好用的一款前端框架，那么今天我们就来说说有关于 “在React如何实现AJAX请求？”这个问题，那么下面是小编整理的相关内容，希望可以帮助到大家。 方法一：jQuery$.ajax 这个方法是比较快而且还粗暴的方法，在旧的官方 React 教程中，他们使用了 jQuery$.ajax 来示范如何从服务器获取数据，我们来看看有关于实现 Ajax 的例子，代码如下所示： loadCom...
react使用AJAX
06-13
React 并没有内置 AJAX 功能，但是我们可以使用第三方库 axios 或者 fetch 来进行 AJAX 请求。 下面是使用 axios 的示例代码： ```javascript import axios from 'axios'; class MyComponent extends React....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值