如何在 ES6 中执行 super class 的 promise

Question

我在 Parent class 中有一个承诺，每当我从 child class 调用承诺时，它都会返回未定义的，而不是执行承诺并返回结果。

从“./secretToken”导入 {newsApiKey 作为 APIKEY，newUrl 作为 APIURL}；

class News{

 constructor(){
    this.token = APIKEY;
    this.url = APIURL;
    this.source = 'bbc-news&';

 }

 topNews(){
   const bbcNews = fetch(`${this.url}?source=${this.source}&sortBy=top&apiKey=${this.token}`);
   bbcNews.then(response => {
     if (!response.ok) {
            throw Error(response.statusText);
        }
    return response.json()
   })
   .then(json => {
     console.log(json.articles);
     return json.articles;
   })
   .catch((err) => {
      return err.message;
    });
 }  
}


export { News as default};

CHILD CLASS

import News from "./news";

class StickyNote extends News{

    displayNews(){
      let bbcNews = super.topNews(); // It is  returning only undefined
      if (typeof bbcNews != 'undefined') {
        console.log(bbcNews); //
      }

    }
}

Answer 1

topNews 从来没有 return 任何东西，所以调用它的结果是 undefined.

你可能想要一个 return 这里：

topNews() {
    const bbcNews = fetch(`${this.url}?source=${this.source}&sortBy=top&apiKey=${this.token}`);
    return bbcNews.then(response => {
//  ^^^^^^
        if (!response.ok) {
          throw Error(response.statusText);
        }
        return response.json()
      })
      .then(json => {
        console.log(json.articles);
        return json.articles;
      })
      .catch((err) => {
        return err.message;
      });
}

另请注意，displayNews 将需要使用它收到的承诺：

displayNews(){
  super.topNews().then(articles => {
    // ...use articles
  });
}

（通常你也会有一个 catch 在消费的终点，但当你将拒绝转化为解决方案时...）

注意：该代码中有一点反模式：它将拒绝转换为带有错误消息的解决方案。任何使用承诺都不会被拒绝，只有 return 类型不同的决议（无论 json.articles 是什么或字符串）。一般来说，最好允许拒绝传播，并在整个链条的最终消费点处理它们（displayNews，我相信，在你的例子中）。您可能会转换他们的内容，但不会将他们从拒绝转换为解决方案。

FWIW，我可能会这样重写：

topNews() {
  return fetch(`${this.url}?source=${this.source}&sortBy=top&apiKey=${this.token}`)
    .catch(_ => {
      throw new Error("network error");
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      return response.json();
    })
    .then(data => {                  // "data", not "json" -- it's not JSON anymore
      return data.articles;
    });
}

...这确保调用者要么通过文章获得解决方案，要么通过 Error 获得拒绝，因此：

displayNews(){
  super.topNews()
    .then(articles => {
      // ...use articles
    })
    .catch(err => {
      // ...show error
    });
}

如何在 ES6 中执行 super class 的 promise

How to execute promise of super class in ES6

ecmascript-6

es6-promise

es6-class

es6-modules