【问题标题】:ES6: How to use, "this", with fetch? [duplicate]ES6:如何在 fetch 中使用“this”? [复制]
【发布时间】:2017-03-08 08:09:23
【问题描述】:

我已经阅读了大量关于 ES6 的文档以及它发生了哪些变化。我正在尝试将新的 oop 语法与一些新的库(如 fetch)结合起来。所以这是我的代码:

apiCall(url, thisAlias=this){
    fetch(url).then(function(response){
    return response.json();
    })
    .then(function(respObj){
        thisAlias.domUpdater(respObj);
    });
}

这是一个基类,它有一个继承的类,最终会有很多继承的类。这个想法是使用 fetch 进行通用 api 调用,我可以更改每个继承类的 domUpdater 方法。我花了很多时间让这段代码工作,给 this 关键字加上别名,以便它可以在 fetch 调用中使用。有没有更优雅的方法来做到这一点?我似乎无法直接将其作为参数传递。

【问题讨论】:

  • 使用 .bind() ?

标签: javascript json api ecmascript-6 fetch


【解决方案1】:

使用具有词法 thisarrow functions 将在这段特定的代码中为您提供最大的帮助

apiCall (url) {
  fetch(url).then(
    response => response.json()
  ).then(
    respObj => this.domUpdater(respObj)
  ).catch(
    err => console.error(err.message, err)
  )
}

否则,如果您可以使用较新的async/await,则根本不必担心this 指向错误的东西——即使没有箭头功能。

async apiCall (url) {
  try {
    let response = await fetch(url);
    this.domUpdater(response.json());
  }
  catch (err) {
    console.error(err.message, err);
  }
}

【讨论】:

  • 感谢您的快速回复。我已经看到使用了这个箭头符号,但不明白为什么。你能解释一下它在做什么或指出我正确的方向吗?再次感谢,我很难找到关于 ES6 的信息。
  • @LoganSaruwatari 由于箭头函数不绑定自己的this(因此是词法范围),then 中的this 将引用封闭上下文或类。由于常规函数默认情况下有它们的this 引用窗口,所以执行this.domUpdater 将执行window.domUpdater(不正确)。您也可以绑定this,但通常认为箭头函数更好
  • 哇!你用第一块代码让我大吃一惊,第二块把它带到了一个全新的水平。我需要你成为我的 ES6 导师。我认识的所有优秀程序员都不会涉足 js。
  • async/await 是一个提案(不是 ES6 或“ES2015”的一部分),但它可以使用 babel 进行转译。如果您有任何其他问题,我很乐意为您提供帮助。
  • 我还没试过。删除 response.json() 后的第一段代码似乎需要逗号。我正要问它为什么在那里,但我认为这可能只是一个错字。某些权限问题无法编辑
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-02-04
  • 1970-01-01
  • 2018-04-21
  • 2017-01-04
  • 1970-01-01
相关资源
最近更新 更多