react axios

Han_Zhou_Z 2022-05-28 我要评论

一、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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!