【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求

简介: 【React】归纳篇(八)在React中发送Ajax请求-axios | fetch | 练习-写一个搜索请求

React中发送Ajax请求-axios的使用

React本身不包含发送Ajax的代码,一般使用第三方的库。如axios,这是专门用于ajax请求的库。其封装了XmlHttpRequest对象的ajax,且使用promise风格写法,在浏览器的客户端与服务端都能使用。

你可能会想问为什么不用fetch()原生函数呢?因为考虑到对老版本浏览器的支持情况。

其次,fetch()不使用XmlHttpRequest对象发生ajax请求。

如果你想使用fetch()在低版本浏览器中,你可以考虑使用fetch.js的兼容库。

[axios CDN]

https://cdn.bootcss.com/axios/0.18.0/axios.js

//get方式

axios.get(url)
    .then(response=>{
    })
    .catch(error =>{
        console.log(error.message)
    })

//post方式

axios.post(url,{参数对象})
    .then(response=>{
      console.log(response)
    })
    .catch(error =>{
        console.log(error.message)
    })

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        class MostStar extends React.Component {
            state = {
                repoName:'',
                repoUrl: ''
            }
            componentDidMount() {
                //方式1、使用axio发送异步ajax请求
                const url = 'https://api.github.com/search/repositories?q=tetris+language:assembly&sort=stars&order=desc'
                axios.get(url)
                    .then(response => {
                        const result = response.data;
                        const {name,html_url} = result.items[0];
                        this.setState({repoName:name,repoUrl:html_url});
                    })
                //方式2、使用fetch()发生请求
                fetch(url)
                    .then(response => {
                        return response.json()
                    })
                    .then(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>
                    )
                }else {
                    return (
                        <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
                    )
                }
            }
        }
        ReactDOM.render(<MostStar/>,document.getElementById('test'))
    </script>
</body>
</html>

使用fetch发生请求

fetch使用文档

https://www.bootcdn.cn/fetch/readme/
https://segmentfault.com/a/1190000003810652

用法

fetch(url).then(function(response){
  return response.json()
}).then(function(data){
  console.log(data);//这才是返回的数据
}).catch(function(e){
  console.log(e);
})

练习:写一个搜索请求##

  • 1、初始化react-app
  • 2、拆分组件
  • 3、编写静态组件
  • 4、编写动态组件

图片.png

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './components/index.css';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('root'));

app.jsx

import React, { Component } from 'react'
import Search from './search'
import Main from './main'
class App extends Component {
    state = {
        searchName: ''
    }
    //更新状态
    setSearchName = (searchName) => this.setState({searchName})
    render () {
        return (
            <div className="container">
                <Search setSearchName={this.setSearchName}/>
                <Main searchName={this.state.searchName}/>
            </div>
        )
    }
}
export default App

search.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Search extends Component {
    static propTypes = {
        setSearchName: PropTypes.func.isRequired
    }
    handleSearch = () => {
       //得到输入的关键字
       const searchName = this.input.value.trim();
       if(searchName){
           //搜索
           this.props.setSearchName(searchName);
       }
    }
    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.handleSearch}>Search</button>
                </div>
            </section>
        )
    }
}
export default Search

main.jsx

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import axios from 'axios'
class Main extends Component {
    static propTypes = {
        searchName: PropTypes.string.isRequired
    }
    state = {
        initView: true,
        loading: false,
        users: null,
        errorMsg: null
    }
    //当组件接收到新的属性时进行回调
    componentWillReceiveProps(newProps) {//指定新的searchName,需要发请求
        const {searchName} = newProps;
        //更新状态
        this.setState({
            initView:false,
            loading:true
        })
        //发请求
        const url = `https://api.github.com/search/users?q=${searchName}`;
        axios.get(url)
            .then(response => {
                //得到数据
                const result = response.data;
                const users = result.items.map(item=> {
                    return {name:item.login,url:item.html_url,avatarUrl:item.avatar_url}//注意
                }) 
                //更新状态
                this.setState({                    
                    loading:false,
                    users
                })
            })
            .catch(error => {
                //更新状态
                this.setState({
                    loading:false,
                    errorMsg:error.message
                })
            })
    }
    render () {
        const {initView,loading,users,errorMsg} = this.state;
        const {searchName} = this.props;
        if(initView){
            return <h2>请输入关键词进行搜索:{searchName}</h2>
        }else if(loading){
            return <h2>正在请求</h2>
        }else if(errorMsg){
            return <h2>{errorMsg}</h2>
        }else {
            return (
                <div className="row">
                {
                    users.map((user,index)=>(
                        <div className="card" key={index}>
                            <a href={user.url} target="_blank">
                            <img src={user.avatarUrl} style={{width: 100}}/>
                            </a>
                            <p className="card-text">{user.name}</p>
                        </div>
                    ))
                }
                </div>
            )
        }
    }
}
export default Main

index.css

.album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
  }
  .card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
  }
  .card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
  }
  .card-text {
    font-size: 85%;
  }


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
78 2
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
51 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
29天前
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
32 4
|
29天前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
47 2
|
1月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
37 3
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
44 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
29 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
16天前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
12 0
|
2月前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
19 2
|
2月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
62 2