JS isomorphic - httpRequest phía máy khách chỉ

Question

Câu hỏi về lưu lượng dữ liệu dân số trong các ứng dụng thông lượng đẳng cấu. (Tôi đang sử dụng phản ứng, alt, iso và nút nhưng lý thuyết áp dụng cho ví dụ khác)

Tôi có một thông lượng 'cửa hàng' (http://alt.js.org/docs/stores/) mà cần phải lấy dữ liệu từ một api:

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

và khi người dùng điều hướng qua SPA, nhiều dữ liệu hơn sẽ được tải thông qua các yêu cầu http.

Tôi muốn ứng dụng này là đẳng cấu để tôi có thể hiển thị các ứng dụng đầy đủ html bao gồm phía máy chủ dữ liệu mới nhất và trả lại cho người dùng để tải trang ban đầu nhanh chóng.

react.renderToString() cho phép tôi làm cho ứng dụng như html, và tôi có thể gieo rắc các dữ liệu sử dụng alt & iso như:

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 

Vấn đề là tôi sẽ thấy các lỗi khi chạy phía máy chủ js như cửa hàng sẽ muốn thực hiện một yêu cầu http mà nó sẽ không thể làm (như xmlhttprequest sẽ không tồn tại trong nút)

Làm cách nào tốt nhất để giải quyết vấn đề này?

Giải pháp duy nhất tôi có thể nghĩ đến sẽ được quấn HttpRequest từ các cửa hàng với:

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

    ... 

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

Bất kỳ ý tưởng tốt hơn? Cảm ơn trước.

Answer 1

Tôi khuyên bạn nên gắn thư viện Ajax hoặc XMLHttpRequest trực tiếp nếu bạn đang chạy serverside. Chỉ cần shim nó với mã cung cấp dữ liệu trực tiếp từ cơ sở dữ liệu hoặc ứng dụng của bạn.

Một ví dụ nhanh:

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/

Tôi whipped này lên trong vòng 5 phút cuối cùng chủ yếu sử dụng các XMLHTTPRequest mdn page

Tuy nhiên nếu bạn đang sử dụng bất cứ điều gì không trực tiếp dựa trên XMLHttpRequest hoặc một cách rõ ràng nút nhận thức (như superagent) bạn có thể sẽ cần phải shim chức năng thư viện chính nó.

Các công việc khác để thực hiện trên đoạn mã này sẽ triển khai các lỗi và các loại nội dung khác nhau.