3

Столкнулся с проблемой асинхронного выполнения запросов. Подскажите, как правильно написать код:

// Determine the only image extension on the url
function getImgType(objUrl) {
 var res = null;
 chrome.downloads.search({url: objUrl}, function(items) {
  var mime = items[0].mime;
  if (mime.indexOf('image/') == 0) {
   res = mime.substring(6);
   console.log('1- res = ' + res);
  };
 });
 console.log('2- res = ' + res);
 return res;
};

Результат работы:

2- res = null
1- res = jpeg

Нужно чтобы getImgType вернула результат только после завершения работы callback в функции function(items).

Pavel Parshin
  • 9,239
Vitaliy P.
  • 33

2 Answers2

4

Результат работы правильный, у вас скрипт выполняется в однопоточной среде, поэтому вы сначала увидели результат переменной res равной null, затем сработал асинхронный callback переданный в функцию search и переменной res присвоилось заначение jpeg. Правильно будет передавать callback в функцию getImgType или использовать Promise

function getImgType(objUrl, callback) {
    chrome.downloads.search({url: objUrl}, function(items) {
        var mime = items[0].mime;
        if (mime.indexOf('image/') == 0) {
            callback(mime.substring(6));
        };
    });
};

И собственно вызов

getImgType("http://some-url/", function(mimeType){
   // какие-то операции с mimeType
});

C использованием Promise 

function getImgType(objUrl){
    return new Promise(function(resolve, reject){
         chrome.downloads.search({url: objUrl}, function(items) {
             var mime = items[0].mime;
             if (mime.indexOf('image/') == 0) {
                 resolve(mime.substring(6));
             } else {
                 reject(new Error("Incorrect mime type")
             }
         });
    });
}

Вызов функции getImgType будет выглядеть теперь иначе 

getImgType("http://some-url/")
      .then(function(mimeType){
          // какие-то операции с mimeType
      })
      .catch(function(err){
          // обработка ошибки 
      });
hijeane
  • 76
  • а return promise не нужен? – рони Feb 09 '16 at 11:32
  • Премного благодарен !!! Выбрал первый вариант, все работает. – Vitaliy P. Feb 09 '16 at 11:49
  • @рони, нужен, иначе будет исключение что у undefined нет метода then – Grundy Feb 09 '16 at 12:05
  • ошибся в примере, нужен конечно – hijeane Feb 09 '16 at 12:07
  • @hijeane Если при выполнении скрипта необходимо несколько раз вызывать getImgType(objUrl, callback), то не могу вызывать function(mimeType) для основного кода скрипта. Возможно ли изменить getImgType так, чтобы получить такой вызов mimeType = getImgType("http://some-url/"); ? – Vitaliy P. Feb 11 '16 at 14:22
0

Чтобы получить вызов типа mimeType = getImgType("http://some-url/") необходимо использовать синхронный запрос, чего делать крайне не рекомендуется. Однако, если по-другому решить поставленную задачу не удается, то для коротеньких запросов заголовка страниц можно использовать следующий код:

function getImgType(objUrl) {
  var xhr = new XMLHttpRequest();
  xhr.open('HEAD', objUrl, false);
  try {
    xhr.send();
  } catch(err) {
      return;
    };
  var imgType = xhr.getResponseHeader("Content-Type");
  if (imgType) {
    if (imgType.indexOf('image/') == 0) {
      return imgType.substring(6);
    };
  };
};

И собственно вызов:

mimeType = getImgType("http://some-url/");
Vitaliy P.
  • 33
  • 2
    Синхронный запрос -- это не решение проблемы. Совсем. Это всего лишь костыль. Правильные варианты решения проблемы уже были озвучены в соседнем ответе. – Dmitriy Simushev Feb 17 '16 at 12:56