用React處理ajax

我應該如何處理相當傳統的web應用程序中的ajax請求？特別是對於視圖使用React，同時有一個後端處理數據（如文本和其他數據），但使用ajax自動保存用戶交互，例如切換選項或喜歡帖子到服務器。用React處理ajax

我應該只是使用jQuery來做這件事，或者像Backbone這樣的東西會更有益嗎？

2015-05-01 user2442241

看看通量和人們是如何處理有AJAX：http://stackoverflow.com/questions/ 26632415/where-should-ajax-request-be-made-in-flux-app – DesignerGuy

你也可以使用。隨你便。如果你已經有了一些Backbone的東西，你可以繼續使用它。 –

我使用jQuery來使用React和Django後端進行AJAX調用。 – PythonIsGreat

爲了防止有人偶然發現並不知道，jQuery使得發送AJAX調用變得非常容易。由於React只是JavaScript，它將像其他任何jQuery AJAX調用一樣工作。

React自己的文檔使用jQuery來進行AJAX調用，所以我認爲這對於大多數目的而言是足夠好的，無論是堆棧還是堆棧。

componentDidMount: 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) 
    }); 
    },

來源

2015-05-01 19:06:16 PythonIsGreat

+13

這是一個巨大的庫，只是爲了一個AJAX包裝。他們可以下載的2.x壓縮版本是82 KB。這對於一個封裝來說很重要，它可以用足夠少的代碼來編寫，以適應屏幕。 – ivarni

是的，你說得對，但我仍然使用jQuery，除了Ajax調用。用React下載它是一件痛苦的事情，但jQuery對我完全擺脫它仍然有幫助。 – PythonIsGreat

關於jquery巨大的話題：其他選擇包括superagent和reqwest。兩者都有非常相似的API，但相比之下，超級競爭者只有10kB。 –

我不會使用JQuery，因爲AJAX調用實際上並不複雜，JQuery是一個相當大的依賴項。請參閱vanillajs關於在不使用庫的情況下執行AJAX調用的注意事項：http://vanilla-js.com/

來源

2015-05-01 22:52:33

不建議使用'jQuery'，我更喜歡使用'fetch'。 – AmerllicA

確實。 'fetch'這幾天是用於執行HTTP請求的goto解決方案 –

您可以使用JavaScript Fetch API，它也支持GET和POST，並且它還具有建立Promise的功能。

fetch('/api/getSomething').then(function() {...})

來源

2016-03-19 16:20:46

您如何處理取消正在進行的請求？ –

目前這不是一個反應本地的好選擇：http：//caniuse.com/#feat=fetch – circuitry

當然，您可以使用與反應本機（我做）您提供的鏈接顯示瀏覽器兼容性。 React不是瀏覽器（混合）技術，所以你可以包括通過NPM獲取。 – Plaul

請簽了Facebook的官方文檔大約Complementary Tools在https://github.com/facebook/react/wiki/Complementary-Tools

他們只是建議幾個數據獲取API的喜歡

superagent：一個輕量級的「同構」庫AJAX請求。
reqwest： AJAX重新來過。包括對xmlHttpRequest，JSONP，CORS和CommonJS Promises的支持A.瀏覽器支持延伸到IE6。
react-ajax：反應的Ajax請求組件。
axios：基於承諾的瀏覽器和node.js的HTTP客戶端。

我個人最喜歡的應該是axios由於在瀏覽器以及nodejs env工作的承諾。

來源

2016-04-14 10:14:38

使用'react-ajax'很荒謬，我找不到它，我更喜歡使用'fetch'並使用'async/await'來更好的理解和流暢的編碼。 – AmerllicA

我絕對讓你使用Fetch API。這是非常簡單的理解，支持所有的方法，你可以使用async/await而不是promise/then並回調地獄。

例如：

fetch(`https://httpbin.org/get`,{ 
    method: `GET`, 
    headers: { 
     'authorization': 'BaseAuth W1lcmxsa=' 
    } 
}).then((res)=>{ 
    if(res.ok) { 
     return res.json(); 
    } 
}).then((res)=>{ 
    console.log(res); // It is like final answer of XHR or jQuery Ajax 
})

在更好的方法或async/await方式：

(async function fetchAsync() { 
    let data = await (await fetch(`https://httpbin.org/get`,{ 
           method: `GET`, 
           headers: { 
            'authorization': 'BaseAuth W1lcmxsa=' 
           } 
          })).json(); 
         console.log(data); 
})();

來源

2017-12-26 18:11:19 AmerllicA

用React處理ajax

回答

相關問題