Javascript (typescript) Chrome 扩展，函数回调如承诺？

Question

像这样的代码

let anotherFolder='whatever';
let anotherFolder2='whatever';

chrome.bookmarks.create( {title:'whatever2'}, function( parentFolder ) {
  chrome.bookmarks.move( anotherFolder, {parentId: parentFolder.id}, function() {
    chrome.bookmarks.removeTree( anotherFolder2, function() {
      resolve();
    });
  });
});

我可以将其转换为链式函数吗？像

let anotherFolder='whatever';
let anotherFolder2='whatever';

return new Promise(function(resolve){
  chrome.bookmarks.create( {title:'whatever2'}, function( parentFolder ) {
    resolve(parentFolder);
  }).then( (parentFolder) => {
    chrome.bookmarks.move( anotherFolder, {parentId: parentFolder.id}, function() {
      resolve();
    })
  }).then () => {
    chrome.bookmarks.removeTree( anotherFolder2, function() {
      resolve();
    });
  });
});

因为我收到错误消息“属性 'then' 在类型 'void' 上不存在”

*这是 javascript-打字稿，但在这里应该无关紧要 (?)

Answer 1

您需要 "promisify" 任何 chrome.bookmarks.* 函数 - 顺便说一句，这使它们与 Firefox 和（最终）Edge Web Extensions 中的 browser.bookmarks.* 函数一样工作

承诺您使用的功能

let create = p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.create(p1, resolve);
});
let move = (p1, p2) =>  new Promise((resolve, reject) => {
    chrome.bookmarks.move(p1, p2, resolve);
});
let removeTree = p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.removeTree(p1, resolve);
});

那么您可以按如下方式使用这些功能：

let anotherFolder='whatever';
let anotherFolder2='whatever';


create({title:'whatever2'})
.then(parentFolder => move(anotherFolder, {parentId: parentFolder.id}))
.then(() => removeTree(anotherFolder));

如果您正在考虑在 Firefox（以及最终的 Edge）中使用您的扩展程序

未测试

let create = browser.bookmarks.create || p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.create(p1, resolve);
});
let move = browser.bookmarks.move || (p1, p2) => new Promise((resolve, reject) => {
    chrome.bookmarks.move(p1, p2, resolve);
});
let removeTree = browser.bookmarks.removeTree || p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.removeTree(p1, resolve);
});

那么你上面的代码应该在任何网络扩展中工作

Answer 2

接受的答案很好，但有些库已经为您完成了此操作，例如 chrome-extension-async. That also includes TypeScript definitions 用于承诺的回调。

用 bower 安装它

bower install chrome-extension-async

或npm

npm i chrome-extension-async

或download chrome-extension-async.js文件并直接包含：

<script type="text/javascript" src="chrome-extension-async.js"></script>

您可以将此库与 promises 一起使用，它允许您链接函数（而不是嵌套回调）：

function whatever(anotherFolder, anotherFolder2) {
    return  chrome.bookmarks.create({title:'whatever2'}).
        then(parentFolder => 
            chrome.bookmarks.move(anotherFolder, {parentId: parentFolder.id})).
        then(() => 
            chrome.bookmarks.removeTree(anotherFolder2));
}

我强烈建议您使用（相当新的）async 和 await 语法，如果您愿意，TypeScript 可以将其转换为旧版本的 JS。然后你的代码变成：

async function whatever(anotherFolder, anotherFolder2) {
    const parentFolder = await chrome.bookmarks.create({title:'whatever2'});
    await chrome.bookmarks.move(anotherFolder, {parentId: parentFolder.id});
    await chrome.bookmarks.removeTree(anotherFolder2);
}

这与基于 promise 的代码做同样的事情，但是冒泡异常并使其更易于与逻辑流一起使用（if 即使有 promise 分支逻辑也可能很混乱）。

Javascript (typescript) Chrome 扩展，函数回调如承诺？

Javascript (typescript) Chrome extension, function callback as promises?

javascript

typescript

google-chrome-extension

chain

arrow-functions