Обработка выборки Javascript как json, так и blob

Использование javascript-выборки и вызов службы отдыха, которая в случае успеха возвращает большой двоичный объект, в противном случае возвращает сообщение об ошибке как json. Как это будет обрабатываться в выборке? Фактическая служба - это реализация веб-API asp.net, которая в случае успеха возвращает FileStreamResult (или FileContentResult), в противном случае возвращает код ошибки с json, содержащим сообщение об ошибке. Ниже приведен пример того, что я пытаюсь сделать:

fetch('flowers.jpg').then(function(response) {
  if (response.ok) {
    return response.blob();
  } else {
    return response.json();
}

}).then(function(myBlob) {  // here I would also like to function(jsonError)
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.info('There has been a problem with your fetch operation: ', error.message);
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
0
3 182
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

fetch('flowers.jpg').then(function(response) {
    if (response.ok) {
        return response.blob().then(function(myBlob) {
            var objectURL = URL.createObjectURL(myBlob);
            myImage.src = objectURL;
        });
    } else {
        return response.json().then(function(jsonError) {
            // ...
        });
    }
}).catch(function(error) {
    console.info('There has been a problem with your fetch operation: ', error.message);
});

Вы можете использовать вложенный блок then, чтобы передать буквально все, что вы хотите, следующему обработчику then. Образец:

fetch('flowers.jpg').then(function (response) {
    if (response.ok) {
        return response.blob()
            .then(function (myBlob) {
                return {
                    blob: myBlob
                };
            });
    } else {
        return response.json()
            .then(function (myJson) {
                return {
                    json: myJson
                };
            });
    }

}).then(function (myData) { 
    if (myData.blob){
        // Handle blob case
    }else{
        // Handle JSON case
    }
}).catch(function (error) {
    console.info('There has been a problem with your fetch operation: ', error.message);
});

Возможно, более семантически точный способ обработки этого - отклонение при возникновении ошибки.

fetch('flowers.jpg').then(function (response) {
    if (response.ok) {
        return response.blob();
    } else {
        return response.json()
            .then(function (myJson) {
                return Promise.reject(myJson);
            });
    }

}).then(function (myData) {
    // Handle blob case
}).catch(function (error) {
    //Handle JSON case
});

Нет смысла использовать return Promise.resolve(value); из обработчика then, просто используйте return value;. then всегда возвращает обещание, которое разрешается с помощью возвращаемого вами значения (или отклоняется с тем, что вы выбрасываете), если вы не возвращаете обещание. (Если вы это сделаете, обещание then создает и возвращает ему цепочки.) Таким образом, он просто создает дополнительный уровень. :-)

T.J. Crowder 04.05.2018 14:09

О да. У меня плохая привычка для «читабельности». Нужно прекратить это делать :)

Chirag Ravindra 04.05.2018 14:18

Другие вопросы по теме