Question

我想获取数据并准备好将另一个函数用作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。

Answer 1

使用异步呼叫时，您无法保证呼叫何时返回（因此是异步）。这意味着如果你想要在返回数据后完成某些事情，那么这个地方就在＆＃34;然后＆＃34;条款。

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

Answer 2

这是不可能的。您需要更改程序设计才能使用此功能。这是一个简单的例子：

假设您有一些函数foo()返回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程序将无法完成运行。

使用JavaScript

2 个答案: