React中的axios模块及使⽤⽅法⽬录
1 axios介绍
2 使⽤⽅法
2.1 在React中安装axios
2.2 get请求
2.3 post请求：发送表单数据和⽂件上传
2.4 put请求：对数据进⾏全部更新
2.5 patch请求：只对更改过的数据进⾏更新
2.6 delete请求：删除请求（参数可以放在url上，也可以和post⼀样放在请求体中）1 axios介绍
发送ajax请求的步骤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
<("url")
.then(res => { // 请求成功后的处理
/
/ res是服务器返回的响应数据
}).catch(err => { // 请求失败后的处理
// err是请求失败后的信息
})
2、发起带参数的get请求：在服务器端获取请求参数的⽅式 —> req.query.参数名
// ⽅式1
<("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: '橘猫吃不胖'
})
前端：
de // 1001
res.data.msg // 橘猫吃不胖
到此这篇关于React中的axios模块的⽂章就介绍到这了，更多相关React axios模块内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论