Как обрабатывать HTTP-код Ответы 4xx в fetch api

Question

Мне было интересно, как мы должны обрабатывать 400 из бэкэнд, когда мы используем функцию ajax. Мы можем сделать, если утверждение в функции решения обещания и проверить, является ли статус res 400. Разный подход заключается в создании службы обертки для извлечения, а когда мы получили 400 с сервера, мы бросаем исключение. Как бороться с этой проблемой?

Answer 1

Я бы предложил обертку, которая проверяет response.ok, которая будет истинна, если код ответа 2xx.

Примечание это заявление от MDN page on fetch():

Точная проверка успешной выборки() будет включать в себя проверку того, что обещание решить, а затем проверить, что свойство Response.ok имеет значение верно. Статус HTTP 404 не является ошибкой сети .

Вот обертка, как это:

function fetchData() { 
    return fetch.apply(null, arguments).then(function(response) { 
     if (!response.ok) { 
      // create error object and reject if not a 2xx response code 
      var err = new Error("HTTP status code: " + response.status); 
      err.response = response; 
      err.status = response.status; 
      throw err; 
     } 
     return response; 
    }); 
} 

Answer 2

Включение его в вашу HTTP-абстракцию, вероятно, является хорошей идеей. Может быть, с каким-то options аргумента:

const myFetch = (method, path, {headers, strictErrors, whatever}) => { 
    // fetch here, if strictErrors is true, reject on error. 
    // return a Promise. 
} 

myFetch('GET', 'somepath', {strictErrors: true}) 
    .then(response => {}) 
    .catch(err => { /* maybe 400 */ }); 

обертка вокруг fetch обычно является хорошей идея, fetch является функцией относительно низкого уровня. Так же, как нецелесообразно напрямую создавать новые объекты XHR повсюду, я считаю, что не рекомендуется напрямую звонить fetch() в различные части вашего приложения. В некотором роде это похоже на глобальную переменную.