将其他参数传递给JSONP回调

本文介绍了将其他参数传递给JSONP回调的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

对于我的项目，我需要使用JSONP对（远程）API进行多次调用以处理API响应。所有调用都使用相同的回调函数。所有调用都是在客户端使用JavaScript动态生成的。

For a project of mine I need to do multiple calls to a (remote) API using JSONP for processing the API response. All calls use the same callback function. All the calls are generated dynamically on the client's side using JavaScript.

问题如下：如何将其他参数传递给该回调函数以告知函数关于我使用的请求参数。因此，例如，在以下示例中，我需要 myCallback 函数来了解 id = 123 。

The problem is as follows: How do I pass additional parameters to that callback function in order to tell the function about the request parameters I used. So, e.g., in the following example, I need the myCallback function to know about id=123.

<script src="remote.host/api?id=123&jsonp=myCallback"></script>

有没有办法实现这一点，而无需为每个电话创建单独的回调函数？一个vanilla JavaScript解决方案是首选。

Is there any way to achieve this without having to create a separate callback function for each of my calls? A vanilla JavaScript solution is preferred.

编辑：

在第一次评论和回答后，出现以下几点：

After the first comments and answers the following points came up:

• 我对远程服务器没有任何控制权。因此，不能选择将参数添加到响应中。
• 我同时启动多个请求，因此存储我的参数的任何变量都无法解决问题。
• 我知道，我可以动态创建多个回调并分配它们。但问题是，我能否以某种方式避免这种情况。如果没有其他解决方案弹出，这将是我的后备计划。

推荐答案

您的选择是如下所示：

让服务器将ID放入响应中。这是最干净的，但通常你无法更改服务器代码。

如果你能保证一次只有一个JSONP调用涉及ID inflight，那么你可以只是东西将ID值转换为全局变量，并在调用回调时，从全局变量中获取id值。这很简单，但很脆弱，因为如果同时有多个JSONP调用涉及到进程中的ID，它们将互相踩一些东西将无效。

生成每个JSONP调用的唯一函数名称，并使用与该函数名称关联的函数闭包将id连接到回调。

这里是第三个选项的一个示例。

Here's an example of the third option.

您可以使用闭包来跟踪变量，但是因为您可以同时在飞行中进行多个JSON调用，您必须使用动态生成的全局可访问函数名称，该函数名称对于每个连续的JSONP调用都是唯一的。它可以这样工作：

You can use a closure to keep track of the variable for you, but since you can have multiple JSON calls in flight at the same time, you have to use a dynamically generated globally accessible function name that is unique for each successive JSONP call. It can work like this:

假设为JSONP生成标记的函数是这样的（你替换现在正在使用的任何东西）：

Suppose your function that generate the tag for the JSONP is something like this (you substitute whatever you're using now):

function doJSONP(url, callbackFuncName) { var fullURL = url + "&" + callbackFuncName; // generate the script tag here }

然后，你可能有执行此操作之外的另一个函数：

Then, you could have another function outside of it that does this:

// global var var jsonpCallbacks = {cntr: 0}; function getDataForId(url, id, fn) { // create a globally unique function name var name = "fn" + jsonpCallbackstr++; // put that function in a globally accessible place for JSONP to call jsonpCallbacks[name] = function() { // upon success, remove the name delete jsonpCallbacks[name]; // now call the desired callback internally and pass it the id var args = Array.prototype.slice.call(arguments); args.unshift(id); fn.apply(this, args); } doJSONP(url, "jsonpCallbacks." + name); }

您的主要代码将调用 getDataForId（）并且传递给它的回调将传递id值，然后传递JSONP对函数的其他参数：

Your main code would call getDataForId() and the callback passed to it would be passed the id value like this followed by whatever other arguments the JSONP had on the function:

getDataForId(123, "remote.host/api?id=123", function(id, /* other args here*/) { // you can process the returned data here with id available as the argument });