Chrome 로컬 저장소를 사용하는 올바른 방법

Question

Chrome 확장 프로그램을 만들고 Chrome의 비동기 로컬 저장소 get을 사용하는 가장 좋은 방법이 궁금합니다. 사용자 저장소의 번호를 사용하여 표시 할 올바른 그림을 반환하고 싶습니다. 의 소스 링크가 window.sheetURL에 저장 :

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

: 나는 '내가 <img> 설정하기 전에이 호출되는

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

사진의 정확한 URL에의 sheetURL 특성'을 window을 설정,이 기능이

이 방법이 효과가 있지만 비동기 호출을 처리하는 가장 좋은 방법은 아닌 것 같습니다. 이런 종류의 일을 처리하는 더 좋은 방법이 있습니까?

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