-2

我想获取数据并准备好另一个函数用作 javaScript 对象。问题是程序完成后才获取数据。这是项目的链接：https ://github.com/bigbassroller/isomorphic-js/blob/master/src/components/pages/Home/HomeController.js 。请参阅此处的代码：

import "babel-polyfill";
import Controller from '../../../lib/controller';
import nunjucks from 'nunjucks';
import fetch from "isomorphic-fetch";
import promise from "es6-promise";


function onClick(e) {
  console.log(e.currentTarget);
}

function getData(context) {
 let data = {
  "name": "Leanne Graham"
 }
 return data;
}

function fetchData(context) {
    return fetch("http://jsonplaceholder.typicode.com/users/1").then(function(response) {
       let data = response.json().body;
       return data;
    });
}


export default class HomeController extends Controller {


  index(application, request, reply, callback) {
    this.context.cookie.set('random', '_' + (Math.floor(Math.random() * 1000) + 1), { path: '/' });
    this.context.data = { random: Math.floor(Math.random() * 1000) + 1 };
    callback(null);
  }

  toString(callback) {

    // Works 
    let context = getData(this.context);
    // Doesn't work
    // let context = fetchData(this.context);

    context.data = this.context.data;

    nunjucks.render('components/pages/Home/home.html', context, (err, html) => {
      if (err) {
        return callback(err, null);
      }

      callback(null, html);
    });
  }

  attach(el) {
    console.log(this.context.data.random);
    this.clickHandler = el.addEventListener('click', onClick, false);
  }

  detach(el) {
    el.removeEventListener('click', onClick, false);
  }

}

是否可以在页面呈现之前获取数据？我尽量让事情保持原样，因为我正在尽可能多地学习。我已经被困了好几天试图解决这个问题，所以我来寻求帮助，并帮助其他有同样问题的人。我的问题与这个问题类似，https://github.com/reactjs/redux/issues/99但我没有尝试使用redux，而是使用promises。

4

2 回答 2

0

这不可能。你需要改变你的程序设计来解决这个问题。这是一个简单的例子：

假设您有一些foo()返回 a 的函数string：

function foo() {
  x = fetchSync();
  return x;
}

现在假设您没有，fetchSync()并且您被迫异步完成工作以计算string要返回的值。您的函数不再可能在string到达函数末尾之前准备好返回。

那么如何解决呢？您foo()也将函数重新设计为异步的。

function foo(callback) {
  // kick off fetch
  fetch(function(response) {
    // call callback() with the
    // the results when fetch is done
    callback(response.json())
  });
}

使用 Promises 的相同示例：

function foo() {
  return fetch().then(function(response) {
     return response.json();
  });
}

通常大多数运行 JavaScript 的环境都支持异步设计。例如，在 Node 中，如果注册了仍然可以调用的回调，则 JavaScript 程序将无法完成运行。

于 2016-05-15T21:01:36.143 回答
0

使用异步调用时，您无法保证调用何时返回（因此是异步的）。这意味着，如果您想在返回数据后完成某些操作，那么执行它的位置就在“then”子句中。

你能在这里解释一下你的用例吗？

于 2016-05-15T20:31:34.527 回答