React中的axios模块及使用方法
1 axios介绍
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。它可以提供以下服务：
1、从浏览器中创建XMLHttpRequest（该对象是ajax（异步请求）的核心）
2、从node.js创建http请求
3、支持PromiseAPI
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防御XSRF
2 使用方法
2.1 在React中安装axios
npm install axios
2.2 get请求
1、发起不带参数的get请求：
// 方式1
axios({methods: 'get', url: '/url'})
.then(res => { // 请求成功后的处理
// res是服务器返回的响应数据
}).catch(err => { // 请求失败后的处理
// err是请求失败后的信息
})
// 方式2
axios.get("url")
.then(res => { // 请求成功后的处理
// res是服务器返回的响应数据
}).catch(err => { // 请求失败后的处理
// err是请求失败后的信息
})2、发起带参数的get请求：在服务器端获取请求参数的方式 —> req.query.参数名
// 方式1
axios.get("url", {params: {参数名: 参数值}})
.then(res => {
})
.catch(err => {
})
// 方式2
axios({
method: "get",
url: "url",
params: {
参数名: 参数值
}
})
.then(res => {
})
.catch(err => {
})2.3 post请求：发送表单数据和文件上传
1、发起不带参数的post请求
// 方式1
axios({
method: "post",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.post("url")
.then(res => {
}).catch(err => {
})
2、发起带参数的post请求：在服务器端获取请求参数的方式 —> req.body.参数名
// 方式1
axios({
method: "post",
url: "url",
data: {
参数名: 参数值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.post("url", {参数名: 参数值})
.then(res => {
}).catch(err => {
})
2.4 put请求：对数据进行全部更新
1、发起不带参数的put请求
// 方式1
axios({
method: "put",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.put("url")
.then(res => {
}).catch(err => {
})
2、发起带参数的put请求：在服务器端获取请求参数的方式 —> req.body.参数名
// 方式1
axios({
method: "put",
url: "url",
data: {
参数名: 参数值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.put("url", {参数名: 参数值})
.then(res => {
}).catch(err => {
})
2.5 patch请求：只对更改过的数据进行更新
1、发起不带参数的patch请求
// 方式1
axios({
method: "patch",
url: "url"
}).then(res => {
}).catch(err => {
})
// 方式2
axios.patch("url")
.then(res => {
}).catch(err => {
})
2、发起带参数的patch请求：在服务器端获取请求参数的方式 —> req.body.参数名
// 方式1
axios({
method: "patch",
url: "url",
data: {
参数名: 参数值
}
}).then(res => {
}).catch(err => {
})
// 方式2
axios.patch("url", {参数名: 参数值})
.then(res => {
}).catch(err => {
})
2.6 delete请求：删除请求（参数可以放在url上，也可以和post一样放在请求体中）
1、可以像get请求一样包装请求参数：在服务器端获取请求参数的方式 —> req.query.参数名
axios.delete('url', {
params: {
参数名: 参数值
}
}).then(res => {
}).catch(err => {
})
2、可以像post请求一样包装请求参数：在服务器端获取请求参数的方式 —> req.body.参数名
axios.delete('url', {data: {参数名: 参数值}})
.then(res => {
})
.catch(err => {
})
3 axios的响应结构
{
// `data` 由服务器提供的响应
data: {},
// `status` HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK",
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
后台：res.json(result)，发送了json格式的数据，相当于：{ data: result }
前端：res.data
例如后台：
res.json({
code: 1001,
msg: '橘猫吃不胖'
})
前端：
res.data.code // 1001 res.data.msg // 橘猫吃不胖
到此这篇关于React中的axios模块的文章就介绍到这了,更多相关React axios模块内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多。这篇文章主要介绍了webpack4+react多页面架构的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
React Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
React视频播放控制组件Video Controls的实现
本文主要介绍了React视频播放控制组件Video Controls的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
这篇文章主要介绍了react组件基本用法,结合实例形式分析了react组件传值、生命周期、受控组件和非受控组件等相关操作技巧,需要的朋友可以参考下2020-04-04
详解react-router 4.0 下服务器如何配合BrowserRouter
这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
React是前端开发每天都用的前端框架，自然要深入掌握它的原理。我用 React 也挺久了，这篇文章就来总结一下我对 react 原理的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助2022-11-11
这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下2020-05-05
react页面中存在多个input时巧妙设置value属性方式
这篇文章主要介绍了react页面中存在多个input时巧妙设置value属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
props 是 React 组件通信最重要的手段，它在 React 的世界中充当的角色是十分重要的。学好 props 可以使组件间通信更加灵活，同时文中会介绍一些 props 的操作技巧，和学会如何编写嵌套组件2022-10-10
这篇文章主要介绍了React-hooks中的useEffect,对于React组件来说，主作用是根据数据(state/props)渲染UI，除此之外都是副作用（比如手动修改DOM、发送ajax请求），本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-05-05
最新评论