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();
    });
  });
});

因為我得到了“屬性”的錯誤，所以'在'void'上不存在''。

*這是javascript-typescript，但這里應該沒關系（？）

Answer 1

你需要“promisify”任何chrome.bookmarks.*函數 - 這使得它們與Firefox中的browser.bookmarks.*函數和（最終）Edge Web Extensions的工作方式相同

宣傳您使用的功能

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);
});

那么上面的代碼應該適用於任何Web擴展

Answer 2

接受的答案很好，但有些庫已經為您做了這些，例如chrome-extension-async 。 這還包括promisified回調的TypeScript定義 。

用涼亭安裝它

bower install chrome-extension-async

或者是npm

npm i chrome-extension-async

或者下載 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分支邏輯即使使用promises也可能很混亂）。