在 React 如何實現(xiàn)AJAX 請求？實現(xiàn) AJAX請求的方案！

 jQuery 的 $.ajax有學(xué)習(xí)過前端的小伙伴都知道在前端框架 react 是如今比較受歡迎的，而且是比較好用的一款前端框架，那么今天我們就來說說有關(guān)于 “在 React 如何實現(xiàn)AJAX 請求？”這個問題，那么下面是小編整理的相關(guān)內(nèi)容，希望可以幫助到大家。

方法一：jQuery $.ajax

這個方法是比較快而且還粗暴的方法，在舊的官方 React 教程中，他們使用了 jQuery $.ajax 來示范如何從服務(wù)器獲取數(shù)據(jù)，我們來看看有關(guān)于實現(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)
    });
}

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

方法二：Fetch API 

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

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

方法三：SuperAgent 

對于 SuperAgent 這個方法來說它是一個輕量級的 Ajax Api 庫，我們也是通過方法一的案例來看看下面這個代碼：

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

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

方法四： Axios 

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

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

方法五：Request 

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

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

總結(jié)：

以上就是對于“在 React 如何實現(xiàn)AJAX 請求？”這款問題的相關(guān)內(nèi)容的分享，如果你有其他不同的看法也可以和大家一同分享，更多有關(guān)于 react 這方面的相關(guān)內(nèi)容我們都可以在 W3Cschool 中進(jìn)行了解和學(xué)習(xí) react。