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
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
