在 React 如何實(shí)現(xiàn)AJAX 請(qǐng)求？實(shí)現(xiàn) AJAX請(qǐng)求的方案！

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

方法一：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
    });
}

總結(jié)：

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