在React怎么實(shí)現(xiàn)AJAX請(qǐng)求

小編給大家分享一下在React怎么實(shí)現(xiàn)AJAX請(qǐng)求，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

方法一：jQuery $.ajax

這個(gè)方法是比較快而且還粗暴的方法，在舊的官方 React 教程中，他們使用了 jQuery $.ajax 來(lái)示范如何從服務(wù)器獲取數(shù)據(jù)，我們來(lái)看看有關(guān)于實(shí)現(xiàn) Ajax 的例子，代碼如下所示：

loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
            this.setState({data: data});   // 注意這里
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
}

 在代碼中演示了如何在一個(gè)組件中使用 jQuery 的 $.ajax，而且在代碼中我們的回調(diào)函數(shù)用的是  this.setState() ；即當(dāng) jQuery 成功收到數(shù)據(jù)之后應(yīng)該如何通過(guò) React 的 API 更新 state 的。

方法二：Fetch API 

對(duì)于這個(gè)方法來(lái)說(shuō)是個(gè)新的、簡(jiǎn)單的、標(biāo)準(zhǔn)化的API，旨在統(tǒng)一Web通信機(jī)制，并替代 XMLHttpRequest。而且如果你在使用 Node.js ，你也可以通過(guò) node-fetch 來(lái)使 Node.js 支持 Fetch。 通過(guò)上面方法一的案例我們的代碼如下所示：

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // 在這兒實(shí)現(xiàn) setState
    });
}

方法三：SuperAgent 

對(duì)于 SuperAgent 這個(gè)方法來(lái)說(shuō)它是一個(gè)輕量級(jí)的 Ajax Api 庫(kù)，我們也是通過(guò)方法一的案例來(lái)看看下面這個(gè)代碼：

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // 在這兒實(shí)現(xiàn) setState
    });
}

對(duì)于 SuperAgent 來(lái)說(shuō)它也有 Node.js 版本，API 是一樣的。而且 如果你在用 Node.js 和 React 開(kāi)發(fā)同構(gòu)應(yīng)用；我們可以用 webpack 之類的東西嵌入 superagent 并讓它適用于瀏覽器端。因?yàn)闉g覽器端和服務(wù)器端的 API 是一樣的，所以其 Node.js 版本不需要修改任何代碼就可以在瀏覽器上運(yùn)行。 

方法四： Axios 

對(duì)于這個(gè)方法的話它是基于 promise 對(duì)象的 HTTP 客戶端和 fetch 、SuperAgent 一樣，它也可以支持瀏覽器和 Node.js 端。通過(guò)方法一中的案例我們來(lái)看看 Axios 的用法代碼如下所示：

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
        // 在這兒實(shí)現(xiàn) setState
    }).catch(function(error){
        // 處理請(qǐng)求出錯(cuò)的情況
    });
}

方法五：Request 

對(duì)于 Request 這是一個(gè)在思想上追求極簡(jiǎn)設(shè)計(jì)的 JS 庫(kù)，他也是最流行的 Node.js 模塊之一，用法的案例代碼如下所示：

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
        // 在這兒實(shí)現(xiàn) setState
    });
}

以上是“在React怎么實(shí)現(xiàn)AJAX請(qǐng)求”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！