React技术栈-react使用的Ajax请求库实战案例

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。

作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.常见的Ajax请求库

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

  常用的ajax请求库
    jQuery: 
      比较重, 如果需要另外引入,生产环境中不建议使用。
    axios: 
      轻量级, 建议使用,axios有以下特点:
        1>.封装XmlHttpRequest对象的ajax;
        2>.promise风格(then/catch);
        3>.可以用在浏览器端和node服务器端;
    fetch: 
      原生函数, 但老版本浏览器不支持
        1>.不再使用XmlHttpRequest对象提交ajax请求
        2>.为了兼容低版本的浏览器, 可以引入兼容库fetch.js

二.使用axios案例

1>.HTML源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios案例</title>
</head>
<body>
    <div id="box1"></div>

    <!--导入 React的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--导入提供操作DOM的react扩展库-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--导入解析JSX语法代码转为纯JS语法代码的库-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--导入解析解析props属性的库-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <!--导入axios库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

    <script type="text/babel">
        //1>.定义组件
        class MostStarRepo extends React.Component{
            state = {
                response_name:'',
                response_url:''
            }

            //在初始化阶段就异步发送请求。
            componentDidMount(){
                const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
                //使用axios发送异步的Ajax请求
                axios.get(url)
                    .then(response => {
                        console.log(response);
                        const result = response.data;
                        //得到数据
                        const {name,html_url} = result.items[0];
                        //更新状态
                        this.setState({response_name:name,response_url:html_url});
                    })
                    //异常处理
                    .catch((error) => {
                        console.log(error.message);
                    })

            }

            render(){
                const {response_name,response_url} = this.state;
                if(!response_name){
                    return <h1>Loading....</h1>
                }else{
                    return <h1>Most star repo is <a href={response_url}>{response_name}</a></h1>
                }
            }
        }

        //2>.渲染组件
        ReactDOM.render(<MostStarRepo />,document.getElementById("box1"));

    </script>
</body>
</html>

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);
  });

Axios的GET请求

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

Axios的POST请求

2>.浏览器打开以上代码渲染结果

三.使用fetch案例

1>.HTML源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用axios案例</title>
</head>
<body>
    <div id="box1"></div>

    <!--导入 React的核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--导入提供操作DOM的react扩展库-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--导入解析JSX语法代码转为纯JS语法代码的库-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--导入解析解析props属性的库-->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <!--导入axios库-->
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

    <script type="text/babel">
        //1>.定义组件
        class MostStarRepo extends React.Component{
            state = {
                response_name:'',
                response_url:''
            }

            //在初始化阶段就异步发送请求。
            componentDidMount(){
                const url = `https://api.github.com/search/repositories?q=r&sort=stars`;
                //使用axios发送异步的Ajax请求
                // axios.get(url)
                //     .then(response => {
                //         console.log(response);
                //         const result = response.data;
                //         //得到数据
                //         const {name,html_url} = result.items[0];
                //         //更新状态
                //         this.setState({response_name:name,response_url:html_url});
                //     })
                //     //异常处理
                //     .catch((error) => {
                //         console.log(error.message);
                //     })

                //使用fetch发送异步的Ajax请求
                fetch(url)
                    .then(response => {
                        return response.json()
                    })
                    .then(data => {
                        //得到数据
                        const {name,html_url} = data.items[0];
                        //更新状态
                        this.setState({response_name:name,response_url:html_url});
                    })
                    //异常处理
                    .catch((error) => {
                        console.log(error.message);
                    })
            }

            render(){
                const {response_name,response_url} = this.state;
                if(!response_name){
                    return <h1>Loading....</h1>
                }else{
                    return <h1>Most star repo is <a href={response_url}>{response_name}</a></h1>
                }
            }
        }

        //2>.渲染组件
        ReactDOM.render(<MostStarRepo />,document.getElementById("box1"));

    </script>
</body>
</html>

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

Fetch的GET请求

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

Fetch的POST请求

2>.浏览器打开以上代码渲染结果**

目录
相关文章
|
2天前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
1月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
27 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
15天前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
21天前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
18 4
|
1月前
|
JSON 前端开发 JavaScript
06_React ajax
06_React ajax
12 0
|
2月前
|
前端开发 JavaScript UED
React 基础与实践 | 青训营笔记
React 基础与实践 | 青训营笔记
45 0
|
3月前
|
前端开发 JavaScript Java
React 速通笔记
【7月更文挑战第17天】
43 1
|
前端开发
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
前端学习笔记202305学习笔记第二十九天-React keep alive原理之2
73 0
|
前端开发
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之8
前端学习笔记202306学习笔记第四十八天-react-admin marmelab之7
49 0
|
5月前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
62 1