आइसोमोर्फिक जेएस - httpRequest क्लाइंट साइड केवल

Question

आइसोमोर्फिक फ्लक्स ऐप्स में स्टोर डेटा आबादी के बारे में प्रश्न। (मैं alt, आईएसओ और नोड प्रतिक्रिया का उपयोग कर रहा है, लेकिन सिद्धांत अन्य उदाहरण के लिए लागू होता है)

मैं एक प्रवाह 'दुकान' है (http://alt.js.org/docs/stores/) है कि एक एपीआई से डेटा प्राप्त करने की जरूरत है:

getState() { 
    return { 
     data : makeHttpRequest(url) 
    } 
} 

और चूंकि उपयोगकर्ता एसपीए के माध्यम से नेविगेट करता है, अधिक डेटा http अनुरोधों के माध्यम से लोड किया जाएगा।

मैं चाहता हूं कि यह ऐप आइसोमोर्फिक हो ताकि मैं नवीनतम डेटा सर्वर के साथ पूर्ण HTML को प्रस्तुत कर सकूं और इसे तेज़ प्रारंभिक पृष्ठ लोड के लिए उपयोगकर्ता को वापस कर सकूं।

react.renderToString() मेरे एचटीएमएल के रूप में प्रस्तुत करना एप्लिकेशन की सुविधा देता है, और मैं जैसे ऑल्ट का उपयोग कर & iso डेटा बीज कर सकते हैं:

storeData = { "MyStore" : {"key" : "value"}}; // set data for store 
alt.bootstrap(JSON.stringify(storeData || {})); // seed store with data 

var content = React.renderToString(React.createElement(myApp)); // render react app to html 

समस्या यह है कि मैं त्रुटियों जब js सर्वर साइड चल देखेंगे क्योंकि स्टोर एक http अनुरोध करना चाहता है जो यह करने में सक्षम नहीं होगा (जैसे xmlhttprequest नोड में मौजूद नहीं है)

इस समस्या को हल करने का सबसे अच्छा तरीका क्या है?

var ExecutionEnvironment = require('react/lib/ExecutionEnvironment'); 

    ... 

    if (ExecutionEnvironment.canUseDOM) { 
     // make http request 
    } else { 
     // do nothing 
    } 

किसी भी बेहतर विचार:

एकमात्र समाधान मैं के बारे में सोच सकते हैं के साथ दुकान से HttpRequest रैप करने के लिए हो सकता है? अग्रिम में धन्यवाद।

Answer 1

यदि आप सर्वरसाइड चला रहे हैं तो मैं सीधे आपके अजाक्स लाइब्रेरी या XMLHttpRequest में हुकिंग की अनुशंसा करता हूं। बस इसे कोड के साथ शिम करें जो सीधे आपके डेटाबेस या एप्लिकेशन से डेटा की आपूर्ति करता है।

एक त्वरित उदाहरण:

var noop= function(){} 

window.XMLHttpRequest= function(){ 
    console.log("xhr created", arguments); 
    return { 
     open: function(method, url){ 
      console.log("xhr open", method, url); 
      // asynchronously respond 
      setTimeout(function(){ 
       // pull this data from your database/application 
       this.responseText= JSON.stringify({ 
        foo: "bar" 
       }); 
       this.status= 200; 
       this.statusText= "Marvellous"; 
       if(this.onload){ 
        this.onload(); 
       } 
       // other libs may implement onreadystatechange 
      }.bind(this), 1) 
     }, 
     // receive data here 
     send: function(data){ 
      console.log("xhr send", data); 
     }, 
     close: noop, 
     abort: noop, 
     setRequestHeader: noop, 
     overrideMimeType: noop, 
     getAllResponseHeaders: noop, 
     getResponseHeader: noop, 
    }; 
} 

$.ajax({ 
    method: "GET", 
    url: "foo/bar", 
    dataType: "json", 
    success: function(data){ 
     console.log("ajax complete", data); 
    }, 
    error: function(){ 
     console.log("something failed", arguments); 
    } 
}); 

http://jsfiddle.net/qs8r8L4f/

मैं इस पिछले 5 मिनट में मार पड़ी है ज्यादातर XMLHTTPRequest mdn page

का उपयोग कर फिर भी आप सीधे XMLHttpRequest पर या स्पष्ट रूप से आधारित नहीं कुछ भी उपयोग कर रहे हैं नोड जागरूक (सुपरएन्टेंट की तरह) आपको शायद लाइब्रेरी फ़ंक्शन को भी तैरने की आवश्यकता होगी।

इस स्निपेट पर करने के लिए अन्य काम त्रुटियों और विभिन्न सामग्री प्रकारों को लागू करेंगे।