React中的axios模块
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React中的axios模块相关的知识，希望对你有一定的参考价值。
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模块的主要内容，如果未能解决你的问题，请参考以下文章