在函数中使用 fetch() 会导致“未定义输出”答案

【问题标题】：Using fetch() in function results in "output not defined"在函数中使用 fetch() 会导致“未定义输出”
【发布时间】：2016-04-28 12:09:22
【问题描述】：

我已经使用 Zapier 几个星期了，按照正常情况，随着我们构建每个功能，我们的需求变得更加复杂。因此，我目前在“Zapier 的代码”中遇到了一些 JavaScript 问题。

任何答案请注意：我本人和我所拥有的程序员团队都不是 JavaScript 专家，但我们确实了解大多数概念。

目标：仅当 javascript 的输入为真时才进行 fetch() 调用。

问题：当代码中包含 fetch() 时，Zapier 总是返回“未定义的输出”。

ReferenceError: output is not defined theFunction

ie：整体代码结构还可以，我使用fetch()的方式，返回和处理就不行了。

我尝试了无数种变体，并在这里使用了一些很棒的帖子，但没有解决问题。

简化后的代码如下所示：

 //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    output = {id: 2};
}

我相信这是我从 fetch() 或 JavaScript 的异步特性返回的方式。

注意：Zapier 为我预定义了“输入”和“输出”变量。 'output' 最初为 Null，必须由代码设置一个值。

【问题讨论】：

这里：callback(null, output);，您正在引用未定义的 output 变量，因此会导致错误。你的意思是callback(null, response)？
@jfriend00 抱歉，我在简化帖子代码时打错了字。固定的。是的，我正在使用callback(null, response)
哪行代码导致错误？仅供参考，当您这样做时output = {id: 2};，output 仍未定义。这将创建一个隐式全局，除非在 strict 模式下，它会导致错误。
具体我不知道，这是我的问题。但是，如果我从函数中删除 fetch() 并只返回一个已知的响应，例如：return {id: 1}; 那么它就可以工作。所以它变成了编码 101。因此我相信这是我从异步 fetch() 调用和返回的方式，以及它如何与导致问题的其他语句交互。
您需要添加 try/catch 处理程序并输出异常以准确找出导致问题的代码行。您必须调试问题以获取更多信息。或者，您可以设置断点并单步执行所有相关代码以查看其抛出的位置。调试通常是使用调试工具或代码检测收集信息然后缩小原因的系统过程，通常不是我们可以通过查看代码来猜测的过程。下一步是找到导致错误的确切代码行。

标签： javascript asynchronous zapier fetch-api

【解决方案1】：

这个函数不正确：

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json(); // <-- response is an string. This method is not defined.
        });
}

fetch() 在响应对象中解析，该对象具有将正文读取为文本或 JSON 的方法，分别为 .text() 和 .json()。 .text() 的解析值是 string，它没有方法 .json()。如果您想简单地将正文解析为 JSON 使用：

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.json();
        });
}

【讨论】：

【解决方案2】：

对于遇到此问题的其他人：

我发现，如果我使用 fetch 调用从 if 语句中通过 Zapier 的“回调”方法异步返回，那么我必须使用“回调”来从脚本中的所有其他控制路径返回，否则我会收到“ReferenceError: output is not defined theFunction”。我不知道为什么会这样，但确实有效。

例如，这样的事情对我有用：

    //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    //output = {id: 2};
    //Use 'callback' instead of output
    callback(null, {id: 2});
}

【讨论】：