一、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
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注阿兔在线工具的更多内容!