Javascript (typescript) Chrome 扩展,函数回调如承诺?
Javascript (typescript) Chrome extension, function callback as promises?
像这样的代码
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-打字稿,但在这里应该无关紧要 (?)
您需要 "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);
});
那么你上面的代码应该在任何网络扩展中工作
接受的答案很好,但有些库已经为您完成了此操作,例如 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 分支逻辑也可能很混乱)。
像这样的代码
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-打字稿,但在这里应该无关紧要 (?)
您需要 "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);
});
那么你上面的代码应该在任何网络扩展中工作
接受的答案很好,但有些库已经为您完成了此操作,例如 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 分支逻辑也可能很混乱)。