-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);
  }

}

ページがレンダリングされる前にデータを取得することは可能ですか? できるだけ多くのことを学ぼうとしているので、物事をできるだけ平凡に保つようにしています。私はこの問題を解決しようとして何日も立ち往生していたので、SOに助けを求め、同じ問題を抱えている他の人を助けるために来ています。私の問題は、 https://github.com/reactjs/redux/issues/99の問題に似ていますが、redux を使用しようとしているのではなく、代わりにプロミスを使用したいと考えています。

4

2 に答える 2

0

それは不可能。これを使用するには、プログラムの設計を変更する必要があります。以下に簡単な例を示します。

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())
  });
}

Promise を使用した同じ例:

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 に答える