在流星助手中发出ajax请求答案

【问题标题】：making ajax request in meteor helpers在流星助手中发出ajax请求
【发布时间】：2016-06-30 02:27:55
【问题描述】：

将数据返回到流星助手方法时，我如何才能等到 ajax 请求完成。

例如，

Template.item.helpers({

        itemName:function () {
            var user = Meteor.user();

            $.when(reallyLongAjaxRequest()).done(function (a1) {
               //tried using jquery when
                return "Item Name should have this because it waited";
            });

            return " Doesnt wait at all";
        }
    });

我有一个 reallyLongAjaxRequest() 正在运行，我希望它在继续使用我的 itemName 助手之前完成。控制台的日志语句始终显示未定义，但那是因为 ajax 请求尚未完成。我在没有运气的情况下尝试使用 jquery。任何想法

编辑：

我应该提到我在辅助函数中是有原因的。我需要渲染项目“id”，以便我可以使用该参数运行 ajax 请求。使用响应式会话将是完美的，但我不知道如何在辅助方法定义之外获取当前呈现的项目？

【问题讨论】：

你必须划分你的功能。一部分在请求之前，另一部分在请求之后。在 XMLHttpObject 上，您可以处理 events
不确定我是否关注你。这是否与使用 $.when 方法结合使用？
我不知道 Meteor Api，所以我建议使用纯 XMLHTTP 请求的解决方法。我可能错了。

标签： javascript ajax meteor

【解决方案1】：

未命名的集合是通过null 传递名称的集合。它是一种内存数据结构，不保存到数据库中。 (http://docs.meteor.com/#meteor_collection)

好的，给定一个名为“items”的 Meteor 集合，并希望根据项目 _id 为每个项目执行 ajax 请求，然后能够在模板中引用 ajax 结果，这就是我要做的：

（大致）

var Items = new Meteor.Collection('items');
var Results = new Meteor.Collection(null);

Items.find().observeChanges({
  added: function (id) {
    $.get(url, {id: id}, function (data) {
      if (Results.findOne(id))
        Results.update(id, {$set: {result: data}});
      else
        Results.insert({_id: id, result: data});
    });
  }
});

Template.item.itemName = function (id) {
  var doc = Results.findOne(id);
  if (doc)
    return doc.result;
  else
    return "";
};

在您的 html 中，您需要将 id 传递给帮助程序：

{{itemName _id}}

有没有办法在定义助手时只超时几秒钟，以便我的 ajax 请求完成而不立即返回。

不，对于响应式编程，事情会立即发生，但是当你有新东西时你会更新。

【讨论】：

没关系。再次感谢您帮助我跳出框框思考。此外，id 不必在帮助程序中。您可以在帮助程序定义中使用 this._id 检索 id，由于我定义集合的方式，我还必须在 meteor.startup 中移动观察更改调用，meteor 找不到“项目”和“结果”
我不想回到这个，但因为这是一个内存数据结构，当我停止和启动流星时。结果中的结果属性不存在，我必须手动刷新才能获取该数据。流星内有什么我可以马上跑的吗？

【解决方案2】：

单独发出 ajax 请求，完成后，将结果存储在 Session 变量中。然后让您的模板助手返回 Session 变量的值。大概……

$.get(url, function (data) {
  Session.set('result', data);
});

Template.item.itemName = function () {
  return Session.get('result');
};

Session是一个响应式数据源，所以当ajax调用的结果进来时，你的模板会自动更新。（当然你可以选择调用任何你喜欢的Session变量，我只是以“结果”为例） .

【讨论】：

ajax 请求使用item _id 作为参数发出ajax 请求。当我显示我的项目时，我获取每个项目 ID，从中获取数据并向数据源发出 ajax 请求以获取更多数据。我如何才能为每个项目发出 ajax 请求，而无需在项目内部获取字段 this._id ？
商品来自哪里？如果它们来自一个集合，那么我要做的就是在集合中添加一个observe，当添加一个项目时，我会在那时触发 ajax 请求。更棘手的是将特定项目的结果放入项目的模板中。一个简单但有点不优雅的方法是将结果存储在一个名为“result_”的会话变量中，并与 id 连接。
嗯，实际上，我可能会使用一个未命名的集合来保存项目结果。
您能解释一下未命名集合以保存项目结果是什么意思吗？我正在使用流星集合“项目”来保存所有项目并执行标准的#each 迭代来显示项目。在定义帮助程序时有没有办法只超时几秒钟，以便我的 ajax 请求完成而不立即返回。事后我可以附加任何类型的流星回调，以便我仍然可以访问每个单独的项目

【解决方案3】：

这在 MeteorJS > 1.3.x 中工作和测试

从控制台meteor add http添加http包

使用发送到服务器的数据元素和自定义标头的示例 POST 调用。

HTTP.call('POST', tokenUri, {
    data: {
        "type": 'authorization_code',
        //"client_id": clientId,
        "code": code,
        "redirect_uri" : redirectUri,

    },
    headers: {
        "Access-Control-Allow-Origin" : "*",
        "Access-Control-Allow-Credentials" : "true",
        "Access-Control-Allow-Methods" : "GET,HEAD,OPTIONS,POST,PUT",
        "Access-Control-Allow-Headers" : "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers",
    }
},function(error, response) {
    if ( error ) {
        console.log( error );
    } else {
        console.log( response );
    }
});

【讨论】：