javascript - 循环访问 chrome.bookmarks.getChildren 数组时的 JS Promise

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 4 年前。

我正在开发一个 google chrome 扩展，我必须循环遍历节点(文件夹)来检查每个文件夹中有多少项目。我正在向函数 getBookmarksCount(ID) 提供项目 ID 。我在从主函数 console.log() 获取结果时遇到问题在记录时返回正确的值。

这是我的代码:

const getBookmarksCount = (bmkNode) => {
    let nodes = []
    let result = 0

    new Promise ((resolve, reject) => {
        chrome.bookmarks.getChildren(bmkNode, (bmkChildren) => {

            _.each(bmkChildren, (item) => {
            
                // Check if the item is a bookmark link
                if (!(item.url === undefined || item.url === null)) {
                    nodes.push(item.title)
                }
                
            })
    
            resolve(_.size(nodes))

        })
        
    }).then((size) => {
        console.log(size) //The correct number of items is listed here eg. 6
        result = size
    })

    return result
}

//I'm suppling a parent folder ID the function should return number of children

getBookmarksCount(123) // eg. 6 -> at the moment returns 0

这是我更新的没有 Promise 的工作版本。 setTimeout()是一个肮脏的黑客但有效。有什么建议可以改进这个功能吗？

const getBookmarksCount = (bmkNode) => {
let nodes = []

const getChildrenCount = (bmkNode) => {

    chrome.bookmarks.getChildren(bmkNode, (bmkChildren) => {
        
        _.each(bmkChildren, (item) => {

            // if is bookmark otherwise loop trough subfolder
            (!(item.url === undefined || item.url === null)) ? nodes.push(item.title): getChildrenCount(item.id)

        })

    })

    setTimeout(() => {
        $(`#counter_${bmkNode}`).html(_.size(nodes))
    }, 50)

}

getChildrenCount(bmkNode)

}

// HTML Template

<label class="label label-primary" id="counter_${item.id}">0</label>

Answer 1

正如 Bravo 在评论中指出的那样，您并不是真的在等待代码执行。不过，你们已经如此接近了!

const getBookmarksCount = (bmkNode) => {
   return new Promise ((resolve) => {
      let nodes = []
      chrome.bookmarks.getChildren(bmkNode, (bmkChildren) => {
          _.each(bmkChildren, (item) => {
              // Check if the item is a bookmark link
              if (!(item.url === undefined || item.url === null)) {
                  nodes.push(item.title)
              }  
          })

          resolve(_.size(nodes))
      })
   })
}
getBookmarksCount(123).then(size => {
    console.log(size)
})

请注意第二行的return new Promise，这是与您提供的代码片段的关键区别。通过执行此操作，您将等待“返回”此处，直到实际完成异步工作并调用 resolve。然后，要获取返回的值，您将执行与您使用的相同的 .then 语法，但在调用 getBookmarksCount 时执行。

希望这能有所帮助，当然也有效!