javascript - 同构 JS - 仅限 httpRequest 客户端

Question

关于同构通量应用程序中存储数据填充的问题。 (我使用的是 react、alt、iso 和 node，但理论适用于其他示例)

我有一个 flux 'store' ( http://alt.js.org/docs/stores/) 需要从 api 获取数据:

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

当用户在 SPA 中导航时，更多数据将通过 http 请求加载。

我希望这个应用是同构的，这样我就可以呈现应用的完整 html，包括最新的服务器端数据，并将其返回给用户以快速加载初始页面。

react.renderToString() 让我将应用程序渲染为 html，并且我可以使用 alt&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 请求(因为 Node 中不存在 xmlhttprequest)

解决这个问题的最佳方法是什么？

我能想到的唯一解决方案是用以下内容包装来自商店的 httprequest:

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

    ...

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

有什么更好的主意吗？提前致谢。

Answer 1

如果您正在运行服务器端，我建议您直接连接到您的 Ajax 库或 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 或显式 Node 感知(如 superagent)的任何东西，您可能需要填充库函数本身。

此代码段的其他工作是实现错误和不同的内容类型。