react中的axios模块你了解吗

 更新时间:2022年03月11日 11:13:29   作者:Han_Zhou_Z  
这篇文章主要为大家详细介绍了react中的axios模块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

一、react中axios模块的使用

1、基于Promise的HTTP库用在浏览器和node.js中

可以提供以下服务:

(1)从浏览器中创建XMLHttpRequest

(2)从node.js创建http请求

(3)支持PromiseAPI

(4)拦截请求和响应

(5)转换请求数据和响应数据

(6)取消请求

(7)自动转换JSON数据

(8)客户端支持防御XSRF

2、创建XMLHttpRequest对象:

该对象是ajax(异步请求)的核心

3、在react中安装axios

npm install axios

4、发起不带参数的get请求

方式一:axios({ methods: 'get', url: '/ulr' }).then(res => {//请求成功后的处理
            console.log(res)
}).catch(err => {//请求失败后的处理
           console.error(err);
})

'res'是服务器返回的响应数据

err是请求失败后的信息

方式二:axios.get('/url').then(res => {
            console.log(res)
}).catch(err => {
           console.error(err);
})

5、带参数的get请求

在服务器端获取请求参数的方式--> req(request).query.参数名

方式一: axios.get('/url', {params: {id: 12}}).then(res => {
              console.log(res)
}).catch(err => {
              console.error(err);
})
//请求的地址实际为:http://localhost:8080/url?id=12
方式二:axios({
               methods: 'get',
               url: 'url',
                params: {
                     id:12    //'id'为参数名
                   }
            }).then(res => {
                   console.log(res)
}).catch(err => {
                   console.error(err);
})

6、post请求:发送表单数据和文件上传

(1)不带参数的post请求

方法一:axios({
        	method:'post',
	        url:'/url'
        }).then(res=>{})
          .catch(err=>{})
方法二:axios.post('url')
		    .then(res=>{})
			.catch(err=>{})

(2)带参数的post请求:在服务器端获取请求参数的方式-->req.body.参数名

服务器端使用req.body.参数名 获取数据
let data = {}
let config = {}
方式一:  axios.post('/url',{id:12}).then(res => {
                   console.log(res)
            }).catch(err => {
                   console.error(err);
            })
方式二:  axios({
              methods: 'post',
              url: '/url',
              data: {id:12}
          }).then(res => {
                console.log(res)
          }).catch(err => {
                console.error(err);
          })

7、put请求

和post请求类似

8、delete请求

(1)可以像get请求一样包装请求参数:在服务器端获取请求参数的方式--req.query.参数名

参数在url的params中:服务器端使用req.query.参数名 获取数据
axios.delete('/url', {
params: {id: 12}  //'id'为参数名
}).then(res => {
                console.log(res)
}).catch(err => {
                console.error(err);
})

(2)可以像post请求一样包装请求参数:在服务器端获取请求参数的方式--req.body.参数名

参数在请求体(post)中 将params改为 data就行:服务器端使用req.body.参数名 获取数据
axios.delete('/url', {
data: {id: 12}  //'id'为参数名
}).then(res => {
                console.log(res)
}).catch(err => {
                console.error(err);
})

强调:axios的响应结构

后台res.json(result)   //发送了json格式的数据

相当于{ data: result }

前端res.data

例如:

后台:

res.json({
    code:1001,
    msg: '小森'
})

 前端:

res.data.code

res.data.msg

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!   

相关文章

  • 在React中实现子组件向父组件传值的几种方法

    在React中实现子组件向父组件传值的几种方法

    在React应用中,组件间的通信是常见的需求,通常,父组件通过props向子组件传递数据,但有时也需要子组件向父组件传递数据,本文将探讨如何在React中实现子组件向父组件传值的几种方法,需要的朋友可以参考下
    2025-04-04
  • react MPA 多页配置详解

    react MPA 多页配置详解

    这篇文章主要介绍了react MPA 多页配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • react-dnd实现任意拖动与互换位置

    react-dnd实现任意拖动与互换位置

    这篇文章主要为大家详细介绍了react-dnd实现任意拖动与互换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • react结合typescript 封装组件实例详解

    react结合typescript 封装组件实例详解

    这篇文章主要为大家介绍了react结合typescript 封装组件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果,继而引发的一系列思考,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • react如何使用mobx6动态加载数据

    react如何使用mobx6动态加载数据

    MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • React启动时webpack版本冲突报错的解决办法

    React启动时webpack版本冲突报错的解决办法

    在启动React应用时,遇到Webpack版本不匹配导致的运行错误,解决方法包括删除全局及局部的webpack和webpack-cli,然后根据项目需求安装特定版本的webpack,本文通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • react中history(push,go,replace)切换路由方法的区别及说明

    react中history(push,go,replace)切换路由方法的区别及说明

    这篇文章主要介绍了react中history(push,go,replace)切换路由方法的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决

    记录React使用connect后,ref.current为null问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论