正确使用Chrome本地存储的方法Get

Question

我正在制作一个Chrome扩展程序，并且想知道使用Chrome的异步本地存储get的最佳方法是什么。 我想使用用户存储中的数字来返回要显示的正确图片。 我有将此函数设置window的sheetURL属性为图片的正确URL：

var getCurSheet = function(){
   chrome.storage.local.get('sheet', function(data){
      $.isEmptyObject(data) ? sheetNum = 1 : sheetNum = data[0];
      switch (sheetNum) {
         case 1:
            window.sheetURL = 'http://i.imgur.com/QlTafAU.png';    
         case 2:
            window.sheetURL = 'http://i.imgur.com/jLGpcKz.png';
         case 3:
            window.sheetURL = 'http://i.imgur.com/2uAyumP.png';
         default:
            window.sheetURL = 'http://static.koalabeast.com/images/flair.png';
      }
   });
}

在将<img>的源设置为存储在window.sheetURL的链接之前，将调用此方法：

var flairs = document.createElement('img');
getCurSheet();
$(flairs).attr({
   'src':window.sheetURL,
   'id':'flairs'
});

尽管这可行，但我感到这不是处理异步调用的最佳解决方案。 有没有更好的方法来处理这种事情？

Answer 1

您要寻找的是一个Promise 。

未经测试，但请尝试以下重构：

function getCurSheet () {
   var sheetUrls = {
      1: 'http://i.imgur.com/QlTafAU.png',
      2: 'http://i.imgur.com/jLGpcKz.png',
      3: 'http://i.imgur.com/2uAyumP.png'
   };
   var defaultSheetUrl = 'http://static.koalabeast.com/images/flair.png';
   return new Promise(function (resolve, reject) {
      chrome.storage.local.get('sheet', function(data) {
         resolve(sheetUrls[data] || defaultSheetUrl);
      });
   });
}

getCurSheet().then(function (url) {
   $('<img>').attr({
      src: url,
      id: 'flairs'
   });
});