Javascript - 响应未定义的提取答案

【问题标题】：Javascript - Response undefined fetchJavascript - 响应未定义的提取
【发布时间】：2017-05-31 20:32:20
【问题描述】：

我在使用 fetch 理解变量和函数时遇到了一些问题。我正在尝试从

传递响应的值

.then(response => response.json())

到

.then(lang => response['lang'].slice(-2)

但是我得到了未定义的变量响应错误，所以我没有正确引用变量。正确的称呼方式是什么？

我还想调用两个控制台日志，下面的代码目前可以这样做，但我认为我不应该覆盖响应函数，我可以自己调用不带参数的函数或命令吗？

.then(response => console.log(response['text']) & console.log(food))

console.log(response['text']) & console.log(food)

  fetch("https://localhost:8000", {method:"POST", body:fd})
  .then(response => response.json())
  .then(lang => response['lang'].slice(-2))
  .then(food => "Temporary")
  .then(function detectType(lang) {
  switch(lang) {
    case 'abc':
        food = "Bananas";
        break;
    case 'def':
        food = "Apples";
        break;
    default:
        food = "Bananas";
        break;
   }})
  .then(response => console.log(response['text']) & console.log(food))
  .catch(err => console.error(err));
}

【问题讨论】：

为什么把函数的参数命名为lang？你没有用它做任何事情。它应该是.then(response => response['lang'].slice(-2))（但不管你叫什么参数）。参数只能在定义它们的函数中访问。另见What is the scope of variables in JavaScript?
如果我对参数这样做，那么当我尝试调用 response['text'] 时会发生什么？这是一个 json 字典，类型为 {'text':'a', 'lang':'b'}
如果“调用”只是指“访问”，它将返回字符串'a'。示例：var foo = {text: 'a'}; console.log(foo['text']);.
不，我的意思是看：console.log(response['text']) & console.log(food)。如果我做.then(response => response['lang'].slice(-2))，那么当前{'text':'a', 'lang':'bbb'} 的响应不会变成'b'吗？ @FelixKling
当然。但是，如果您不希望这样，那么问题不在于参数名称，而在于函数的作用。所有.thens 都是链式。下一个 .then 回调接收前一个回调返回的任何内容。彼此无关的参数名称（即.then(response => console.log(response['text']) & console.log(food)) 中的response 与.then(response => response.json()) 无关。同样，参数的范围是函数。这是您问题的简化示例：function foo(bar) { }; foo(42); console.log(bar);.. .

标签： javascript

【解决方案1】：

如果我理解您想要做什么，请记住，一个函数的返回值是下一个函数接收到的状态。所以你会想要做更多这样的事情：

fetch("https://localhost:8000", {method:"POST", body:fd})
  .then(response => response.json())
  .then(response => {
    response['lang'] = response['lang'].slice(-2);
    return response;
  })
  .then(response => {
    response['food'] = "Temporary";
    return response;
  })
  .then(function detectType(response) {
    switch(response['lang']) {
      case 'abc':
          response['food'] = "Bananas";
          break;
      case 'def':
          response['food'] = "Apples";
          break;
      default:
          response['food'] = "Bananas";
          break;
     }
    return response;
  })
  .then(response => {
    console.log(response['text']);
    console.log(response['food']);
  })
  .catch(err => console.error(err));
}

【讨论】：

【解决方案2】：

关于fetch()，请记住它非常“承诺重”。

fetch("https://localhost:8000", {method:"POST", body:fd}) 返回一个 Promise，你用第一个 then() 处理它

then(response => response.json()) 返回response.json() 将在下一个.then() 中为您提供response.json() 的状态。因此，您可以通过下一个 then() 访问响应的 JSON 表示。

让我们看看它应该是什么样子：

fetch("https://localhost:8000", {method:"POST", body:fd}) 
  .then(response => response.json()) 
  .then(jsonResp => jsonResp['lang'] );

通过最后一行，您可以检查 JSON 对象及其键，而无需进入 Promise 链。如果您想检查lang 属性，您可以按照示例中的方式访问它。

希望这会有所帮助！

【讨论】：

“因为 response.json() 返回一个 Promise” 不，这不是原因。 .then 总是返回一个承诺。也许你的意思是 callback 返回一个承诺？在这种情况下你是对的。
知道了，修好了。谢谢！