App下載

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

猿友 2021-07-12 16:48:14 瀏覽數(shù) (3820)
反饋

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


方法一:jQuery $.ajax

這個(gè)方法是比較快而且還粗暴的方法,在舊的官方 React 教程中,他們使用了 jQuery $.ajax 來示范如何從服務(wù)器獲取數(shù)據(jù),我們來看看有關(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)該如何通過 React 的 API 更新 state 的。


方法二:Fetch API 

對(duì)于這個(gè)方法來說是個(gè)新的、簡單的、標(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){
        // 在這兒實(shí)現(xiàn) setState
    });
}

方法三:SuperAgent 

對(duì)于 SuperAgent 這個(gè)方法來說它是一個(gè)輕量級(jí)的 Ajax Api 庫,我們也是通過方法一的案例來看看下面這個(gè)代碼:

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

對(duì)于 SuperAgent 來說它也有 Node.js 版本,API 是一樣的。而且 如果你在用 Node.js 和 React 開發(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 端。通過方法一中的案例我們來看看 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è)在思想上追求極簡設(shè)計(jì)的 JS 庫,他也是最流行的 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)求?”這款問題的相關(guān)內(nèi)容的分享,如果你有其他不同的看法也可以和大家一同分享,更多有關(guān)于 react 這方面的相關(guān)內(nèi)容我們都可以在 W3Cschool 中進(jìn)行了解和學(xué)習(xí) react。


0 人點(diǎn)贊