React从入门到项目--第六天（React中Ajax的使用）

不念不忘少年蓝@ 2023-06-08 04:57 4阅读 0赞

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还是有很多相像的地方的，没有好坏之分，只有个人习惯吧。