承诺既要解决又要拒绝

Question

好像我的Promise同时返回true和false，控制台返回 "undefined"，然后在下面返回 "something went wrong"。控制台正在返回 "undefined"，然后就在下面返回 "something went wrong"。这些下面返回的数据，表明它实际上并没有在等待Promise。

下面是被调用的函数。

module.exports = (url) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: url
    })
      .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const songtable = $('.chart-list__elements > li')
        const topsongs = []
        songtable.each(function () {
          const rank = $(this).find('.chart-element__rank__number').text()
          if (rank == 11) return false;
          const name = $(this).find('.chart-element__information__song').text()
          const artist = $(this).find('.chart-element__information__artist').text()

          topsongs.push({
            rank,
            name,
            artist
          })
        })
        resolve()
        return topsongs;
      })
      .catch(reject("something went wrong"))
    })
}

从调用者那里：

componentDidMount() {
    const top_songs = topsongs('https://www.billboard.com/charts/hot-100')
    .then(console.log(top_songs))
    .catch(err => console.log(err))
  }

谢谢，我是个新手，我几乎尝试了所有的方法来做这件事。我之所以在调用async axios()的情况下仍有一个Promise，是因为它没有被异步执行，并返回未定义的数据。

Answer 1

.catch(reject("something went wrong"))

你需要通过一个 功能 到 catch.

你是... 呼叫 reject 并立即传递其返回值。

---

你也在使用嵌套的承诺反模式。

axios 返回一个承诺。没有必要再创建一个。

---

module.exports = (url) =>
  axios({
    method: "get",
    url: url,
  })
    .then((response) => {
      const html = response.data;
      const $ = cheerio.load(html);
      const songtable = $(".chart-list__elements > li");
      const topsongs = [];
      songtable.each(function () {
        const rank = $(this).find(".chart-element__rank__number").text();
        if (rank == 11) return false;
        const name = $(this).find(".chart-element__information__song").text();
        const artist = $(this)
          .find(".chart-element__information__artist")
          .text();
        topsongs.push({
          rank,
          name,
          artist,
        });
      });
      return topsongs;
    })
    .catch(() => {throw "something went wrong"});

(用通用的 "something went wrong "代替抛出的错误似乎没有什么帮助。你可能最好完全不使用那个 catch 调用)

Answer 2

你 已经 有承诺，就把它还回去。

  return axios({
      method: 'get',
      url: url
    })
      .then(response => {
        const html = response.data
        const $ = cheerio.load(html)
        const songtable = $('.chart-list__elements > li')
        const topsongs = []
        songtable.each(function () {
          const rank = $(this).find('.chart-element__rank__number').text()
          if (rank == 11) return false;
          const name = $(this).find('.chart-element__information__song').text()
          const artist = $(this).find('.chart-element__information__artist').text()

          topsongs.push({
            rank,
            name,
            artist
          })
        })
        return topsongs;
      })

而且只是为了 "语法糖"。async/await 让一切都更容易阅读。

module.exports = async (url) => {
   const { data } = await axios({method:'get',url});
   const $ = cheerio.load(data);

   ...

   return topsongs;
}