react中的axios模块你了解吗
时间：2023-01-21 09:41:30|栏目：|点击： 次
一、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
总结
