JavaScript (ES7) async wrappers perfect for Chrome.Bookmarks API

Background:

I tasked myself with a little project to sync my Chrome Bookmarks Bar with my Diigo links.

image

Chrome’s Bookmarks API is very straightforward but it is a traditional async callback style call… so it became a good opportunity for me to cozy up to EcmaScript v7’s (ES7) async/await support… since this is done in a Chrome Extension, it lends itself to this hard dependency on ES7 syntax…

async/await is supported as of Chrome v55 in Dec.2016

to me, the basic gist of this shift to async away from traditional callbacks means that we get to flatten all those nested callbacks like this:

//
call_method1(function(response1){
  call_method2(function(response2){
  });
});

to this:

//
let response1 = await call_method1();
let response2 = await call_method2();

admittedly, maybe not super dramatic when you boil it down like that but it really feels like previously complex nested code is easier to read/maintain and modularize when this is now available

Great async reference articles:

Code Nugget:

I want to elaborate further on the very happily working Diigo solution, but for now just the basic async bits…

//
//here's the wrapper
//one main thing to be aware of is that the native Promise object is what we can "await" on
function createBookmarkAsync(parms) {
  return new Promise(function(fulfill, reject) {
    chrome.bookmarks.create(parms, fulfill);
  });
}

//simple usage of the above wrapper
$('#btnRefreshDiigo').click(async function() { //CRITICAL = note the "async" before the function declaration... otherwise google unhelpfully reports that await is an undeclared identifier
  let diigoFolderId = (await createBookmarkAsync({parentId: "1", title: "Diigos"})).id;
  //now continue coding knowing that this code wont execute until the async call returns, very cool!!
}

Also handy for Fetch() API:

it was also great to use the very nicely straightforward new’ish Fetch API (Chrome v43+) and await on that response vs something like jquery.ajax

//
let response = await fetch(json_api_url, { credentials: 'include' }); //the credentials bit passes existing cookies (e.g. leveraging existing login)
let jsonText = await response.text();
let items = JSON.parse(jsonText).items;
comments powered by Disqus