İzomorfik JS - httpRequest istemci tarafı yalnızca

Question

İzomorfik akış uygulamalarındaki mağaza veri popülasyonu hakkında soru.

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

ve:

bir akı 'deposu' olan (http://alt.js.org/docs/stores/) olup, bir API ile ilgili verileri almak için ihtiyacı (I reaksiyona alt, iso ve düğüm kullanıyorum ama teori diğer örnekler için de geçerlidir) Kullanıcı SPA ile gezinirken, http istekleri ile daha fazla veri yüklenecektir.

ben Uygulamalara son veri sunucu tarafında dahil olmak üzere tam html işlemek ve hızlı başlangıç ​​sayfanın yüklenmesini kullanıcıya iade böylece bu uygulama izomorfik olmak istiyorum.

react.renderToString() beni html olarak uygulamayı işlemek sağlar ve ben gibi ALT & iso kullanarak veri yapabilirsiniz tohum:

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 

sorun js sunucu tarafında çalıştırırken ben hatalar görür olmasıdır mağaza bunu yapmak mümkün olmayacak bir http isteği yapmak isteyeceksiniz olarak en iyi yolu bu sorunu çözmek için nedir

(XMLHttpRequest olarak alışkanlık düğüm var)?

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

    ... 

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

Herhangi daha iyi fikir: Aklıma

tek çözüm ile mağazadan HTTPRequest sarmak için olurdu? Şimdiden teşekkürler.

Answer 1

Sana serverside çalıştıran doğrudan eğer Ajax kütüphane ya XMLHttpRequest içine çengel öneriyoruz. Veriyi doğrudan veritabanınızdan veya uygulamanızdan sağlayan kodla değiştirin.

Hızlı bir örnek: Ben doğrudan XMLHttpRequest üzerinde veya açıkça dayanmayan bir şey kullanıyorsanız, çoğunlukla Ancak XMLHTTPRequest mdn page

kullanılarak son 5 dakika içinde bu kadar çırpılmış

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/

node farkında (superagent gibi) muhtemelen kütüphane işlevini kendiniz kesip atmanız gerekecektir.

Bu snippet üzerinde yapılacak diğer çalışmalar, hataları ve farklı içerik türlerini uygulamak olacaktır.