react中的axios模块你了解吗 react中的axios模块你了解吗

一、react中axios模块的使用

1、基于Promise的HTTP库用在浏览器和node.js中
2、创建XMLHttpRequest对象：
3、在react中安装axios
4、发起不带参数的get请求
5、带参数的get请求
6、post请求：发送表单数据和文件上传
7、put请求
8、delete请求

例如：

总结

【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 = https://www.it610.com/article/{}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

例如：后台：