React与之前学过的jQuery不同的是,React本身只关注界面,本身并不包含相关发送ajax的代码,就像jQuery中的$.ajax()在React中是不存在的。
前端应用需要通过 ajax 请求与后台进行交互,获取相应的Json数据。
在React中的前端应用,在与后台进行交互的时候,需要依赖于第三方的ajax库来完成,或者自己进行原生JS的封装,不过这一点工作量就比较大了,相信也不会有人会去这样做。
那究竟有哪些库可以使用呢,说到这里其实大家还是可以引入原来用过的jQuery,毕竟用过比较熟悉,但是并不建议去使用jQuery,因为大家都知道,jQuery是一个函数库,ajax只占到了其中的很小的一部分,相对来说比较重。
axios
最推荐的当属axios了,因为axios是对XmlHttpRequest进行了封装的ajax库,没有其他多余的东西,相对来说比较轻量级,而且采用了promise风格,并且它可以应用在浏览器端甚至NodeJs的服务端。
//安装
npm install axios --save
//引入
import axios from 'axios'
常用的请求方式就是axios的get和post方法了,不同的是get方法是拼接好的请求地址,而post则是向方法中多传递了一个参数,都是通过then来处理请求成功的函数,catch处理失败的函数,返回的数据在response.data中。
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
fetch
还有新出的fetch,但是它存在一点问题就是老板的浏览器不支持fetch,它有一个特点就是不再使用 XmlHttpRequest 对象提交 ajax 请求,如果要用的话,可以引入fetch.js进行结合使用,在遇到老版本的浏览器的时候,fetch.js还是会通过XmlHttpRequest来进行数据请求。
fetch(url).then(function(response) {
return response.json()
}).then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
});
fetch(url, {
method: "POST",
body: JSON.stringify(data), })
.then(function(data) {
console.log(data)
}).catch(function(e) {
console.log(e)
})
其实axios和fetch还是有很多相像的地方的,没有好坏之分,只有个人习惯吧。