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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 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
AI 代码解读

二.使用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>
AI 代码解读

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);
  });
AI 代码解读

Axios的GET请求

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

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>
AI 代码解读

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});
AI 代码解读

Fetch的GET请求

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

Fetch的POST请求

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

目录
打赏
0
10
10
1
172
分享
相关文章
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
182 8
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
190 4
React开发需要了解的10个库
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
118 8
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
69 0
React AJAX
10月更文挑战第10天
20 1
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
React 测试库 React Testing Library
【10月更文挑战第22天】本文介绍了 React Testing Library 的基本概念和使用方法,包括安装、基本用法、常见问题及解决方法。通过代码案例详细解释了如何测试 React 组件,帮助开发者提高应用质量和稳定性。
124 0
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
94 4
React技术栈-React路由插件之自定义组件标签
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
67 2
React技术栈-React UI之ant-design使用入门

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等