Fetch get error

// Fetch GET request with error handling
const element = document.querySelector('#get-request .result');
fetch('https://reqres.in/invalid-url')
    .then(async response => {
        const isJson = response.headers.get('content-type')?.includes('application/json');
        const data = isJson ? await response.json() : null;

        // check for error response
        if (!response.ok) {
            // get error message from body or default to response status
            const error = (data && data.message) || response.status;
            return Promise.reject(error);
        }

        element.innerHTML = JSON.stringify(data, null, 4);
    })
    .catch(error => {
        element.parentElement.innerHTML = `Error: ${error}`;
        console.error('There was an error!', error);
    });

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

• Subscribe on YouTube at https://www.youtube.com/JasonWatmore
• Follow me on Twitter at https://twitter.com/jason_watmore
• Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
• Follow me on GitHub at https://github.com/cornflourblue
• Feed formats available:
  RSS,
  Atom,
  JSON

Other than coding…

I’m currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.

• Subscribe on YouTube at https://www.youtube.com/TinaAndJason
• Follow us on Instagram at https://www.instagram.com/tinaandjason
• Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
• Visit our website at https://tinaandjason.com.au

Need Some Fetch Help?

Search fiverr to find help quickly from experienced Fetch developers.

Время прочтения
5 мин

Просмотры 269K

Прощай, XMLHttpRequest!

fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback’ов и необходимости помнить API для XMLHttpRequest.

Fetch API стал доступен пользователям вместе с Service Worker’ами в global скоупе в Chrome 40, однако уже в версии 42 он станет доступен в скоупе window. Разумеется, для всех остальных браузеров, которые пока ещё не поддерживают fetch существует полифил от GitHub, который доступен уже сегодня.

Простой Fetch запрос

Давайте начнём со сравнения простого примера, реализованного с XMLHttpRequest и fetch. Всё, что мы будем делать в этом примере — сделаем запрос на URL, получим ответ и распарсим его как JSON.

XMLHttpRequest

Пример с XMLHttpRequest потребует от нас установить два обработчика событий на success и error, а так же вызвать два метода: open() и send(). Пример из MDN документации:

function reqListener() {  
  var data = JSON.parse(this.responseText);  
  console.log(data);  
}

function reqError(err) {  
  console.log('Fetch Error :-S', err);  
}

var oReq = new XMLHttpRequest();  
oReq.onload = reqListener;  
oReq.onerror = reqError;  
oReq.open('get', './api/some.json', true);  
oReq.send();

Fetch

Наш fetch запрос будет выглядеть так:

fetch('./api/some.json')  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.log('Looks like there was a problem. Status Code: ' +  
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.json().then(function(data) {  
        console.log(data);  
      });  
    }  
  )  
  .catch(function(err) {  
    console.log('Fetch Error :-S', err);  
  });

Первым делом мы проверяем статус ответа и проверяем, успешно ли выполнился запрос (ожидаем 200 статус). Если всё хорошо, то парсим ответ как JSON.

Ответом fetch() является Stream-объект. Это означает, что в результате вызова метода json() мы получим Promise, т.к. чтение из подобного объекта является асинхронным.

Метаданные ответа

В предыдущем примере мы изучили, как можно проверить статус объекта ответа и конвентировать сам ответ в JSON. Остальные метаданные, к которым вы возможно получить доступ (например, заголовки), приведены ниже:

fetch('users.json').then(function(response) {  
    console.log(response.headers.get('Content-Type'));  
    console.log(response.headers.get('Date'));

    console.log(response.status);  
    console.log(response.statusText);  
    console.log(response.type);  
    console.log(response.url);  
});

Типы ответа

Когда мы делаем fetch-запрос, ответу будет дан тип «basic», «cors» или «opaque». Эти «типы» указывают на то, с какого ресурса пришли данные и могут быть использованы для того, чтобы определить процесс обработки данных.

Когда запрос сделан на ресурс, находящимся на том же origin (имеется ввиду, что запрос выполняется в рамках одного сайта. прим. пер.), ответ будет содержать тип «базовый» и для такого запроса не будет никаких ограничений.

Если запрос сделан с одного origin’а на другой (кроссдоменный запрос), который, в свою очередь, вернул CORS заголовки, тогда типом будет являться «cors». Объекты с типами «cors» и «basic» почти идентичны, однако «cors» несколько ограничивает метаданные, к которым может быть получен доступ до «Cache-Control», «Content-Language», «Content-Type», «Expires», «Last-Modified», и «Pragma».

Что касается «opaque» — то он приходит в случаях, когда выполняется CORS запрос, но удаленный ресурс не возвращает CORS заголовки. Данный тип запроса не предоставляет доступ данным или заголовку статуса, поэтому мы не имеем возможности судить о результате выполнения запроса. В рамках текущей имплементации fetch() не представляется возможности выполнять CORS запросы из скоупа window, и вот здесь написано почему. Эта функциональность должна быть добавлена, как только Cache API станет доступным из объекта window.

Вы можете определить ожидаемый режим запроса, тем самым фильтруя результаты запросов с неподходящим типом. Режим запроса может быть установлен на следующий:

— “same-origin” успешно выполняется только для запросов на тот же самый origin, все остальные запросы будут отклонены.
— “cors” работает так же, как «same-origin» + добавляет возможность создавать запросы к сторонним сайтам, если они возвращают соответствующие CORS заголовки.
— “cors-with-forced-preflight” работает так же, как «cors», но перед запросом всегда отсылает тестовый запрос на проверку.
— “no-cors” используется, когда необходимо выполнить запрос к origin, который не отсылает CORS заголовки и результатом выполнения является объект с типом «opaque». Как говорилось выше, в данный момент это невозможно в скоупе window.

Чтобы определить режим запроса, добавьте объект опций вторым параметром к запросу и установите «mode» в этом объекте:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})  
  .then(function(response) {  
    return response.text();  
  })  
  .then(function(text) {  
    console.log('Request successful', text);  
  })  
  .catch(function(error) {  
    log('Request failed', error)  
  });

Цепочки Promises

Одной из прекрасных особенностей Promise’ов является возможность группировать их в цепочки. Если говорить о них в скоупе fetch(), то они позволяют нам «шарить» логику между запросами.

Если вы работаете с JSON API, вам потребуется проверить статус и распарсить JSON для каждого ответа. Вы можете упростить свой код, определив парсинг статуса и JSON как раздельные функции, которые вернут Promise’ы. Вам останется подумать только об обработке самих данных и, разумеется, исключений.

function status(response) {  
  if (response.status >= 200 && response.status < 300) {  
    return Promise.resolve(response)  
  } else {  
    return Promise.reject(new Error(response.statusText))  
  }  
}

function json(response) {  
  return response.json()  
}

fetch('users.json')  
  .then(status)  
  .then(json)  
  .then(function(data) {  
    console.log('Request succeeded with JSON response', data);  
  }).catch(function(error) {  
    console.log('Request failed', error);  
  });

Мы определяем функцию, которая проверяет response.status и возвращает результат: Promise.resolve() или Promise.reject(). Это первый вызванный метод в нашей цепочке, и если он успешно завершается(Promise.resolve()), то вызывается следующий за ним метод — fetch(), который, в свою очередь, опять возвращает Promise от response.json(). После этого вызова, в случае удачного выполнения, у нас будет готовый JSON объект. Если парсинг провалится, Promise будет отменен и сработает условие возникновения исключения.

Но самое лучшее здесь — это возможность переиспользовать такой код для всех fetch-запросов в приложении. Такой код проще поддерживать, читать и тестировать.

POST запрос

Уже давно никого не удивишь необходимостью использовать POST метод с передачей параметров в «теле» запроса для работы с API.
Чтобы осуществить такой запрос, мы должны указать соответствующие параметры в объекте настроек fetch():

fetch(url, {  
    method: 'post',  
    headers: {  
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
    },  
    body: 'foo=bar&lorem=ipsum'  
  })
  .then(json)  
  .then(function (data) {  
    console.log('Request succeeded with JSON response', data);  
  })  
  .catch(function (error) {  
    console.log('Request failed', error);  
  });

Посылаем учётные данные через Fetch-запрос

Если вы хотите отправить запрос с каким-либо учётными данными (например, с cookie), вам следует установить `credentials` в опциях запроса на «include»:

fetch(url, {  
  credentials: 'include'  
})

FAQ

Могу ли я отменить fetch() запрос?
В настоящий момент это невозможно, но это активно обсуждается на GitHub

Существует ли полифил?
Да

Почему «no-cors» реализован для service workers, но не для window?
Это было сделано из соображений безопасности. Подробнее можно ознакомиться здесь.

Quiz: What does this call to the web’s new fetch() API do?

fetch("http://httpstat.us/500")
    .then(function() {
        console.log("ok");
    }).catch(function() {
        console.log("error");
    });

If you’re like me, you might assume this code logs “error” when run—but it actually logs “ok”.

This expectation probably comes from years of jQuery development, as jQuery’s ajax() method invokes its fail handler when the response contains a failed HTTP status code. For example, the code below logs “error” when run:

$.ajax("http://httpstat.us/500")
    .done(function() {
        console.log("ok");
    }).fail(function() {
        console.log("error");
    });

Why does fetch() work this way?

Per MDN, the fetch() API only rejects a promise when a “network error is encountered, although this usually means permissions issues or similar.” Basically fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such a DNS lookup failure.

The good is news is fetch provides a simple ok flag that indicates whether an HTTP response’s status code is in the successful range or not. For instance the following code logs “Error: Internal Server Error(…)”:

fetch("http://httpstat.us/500")
    .then(function(response) {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response;
    }).then(function(response) {
        console.log("ok");
    }).catch(function(error) {
        console.log(error);
    });

To keep this code DRY and reusable, you probably want to create a generic error handling function you can use for all of your fetch() calls. The following code refactors the error handling into a handleErrors() function:

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(function(response) {
        console.log("ok");
    }).catch(function(error) {
        console.log(error);
    });

For added fun you can use ES6 arrow functions to make the callback formatting a little less verbose:

function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}
fetch("http://httpstat.us/500")
    .then(handleErrors)
    .then(response => console.log("ok") )
    .catch(error => console.log(error) );

Parting thoughts

Although I still don’t like fetch()’s lack of rejecting failed HTTP status codes, over time fetch()’s behavior has grown on me—mostly because it gives me more control over how I handle individual problems. Plus, the composable nature of fetch() makes it fairly trivial to manually handle errors without adding a bunch of verbose code.

Overall I think it’s worth taking few minutes to play with fetch(), even if it’s just to see what you think. It’s certainly a far more readable alternative to XMLHttpRequest. If you happen to be building NativeScript apps, you might not know that you can use fetch() today without any need for a polyfill or fallback. And something about using fetch() to perform HTTP requests in native Android and iOS apps is just plain cool

This article was updated on September 15th, 2015 to use a simpler handleErrors() function based on a comment from Jake Archibald.

The Fetch API is a promise-based JavaScript API for making asynchronous HTTP requests in the browser similar to XMLHttpRequest (XHR). Unlike XHR, it is a simple and clean API that uses promises to provide a powerful and flexible feature set to fetch resources from the server.

Fetch API is pretty much standardized and is supported by all modern browsers except IE. If you need all browsers, including IE, add a polyfill released by GitHub to your project.

How to use Fetch API?

Using Fetch API is really simple. Just pass the URL, the path to the resource you want to fetch, to the fetch() method:

fetch('/js/users.json')
  .then(response => {
    // handle response data
  })
  .catch(err => {
    // handle errors
  })

We pass the path for the resource we want to retrieve as a parameter to fetch(). It returns a promise that sends the response to then() when it is fulfilled. The catch() method intercepts errors if the request fails to complete due to network failure or other reasons.

Make GET request using Fetch API

By default, the Fetch API uses the GET method for asynchronous requests. Let’s use the Reqres REST API to retrieve a list of users using a GET request:

fetch('https://reqres.in/api/users')
  .then(res => res.json())
  .then(res => {
    res.data.map(user => {
      console.log(`${user.id}: ${user.first_name} ${user.last_name}`)
    })
  })

The above request prints the following on the console:

1: George Bluth
2: Janet Weaver
3: Emma Wong

Calling the fetch() method returns a promise. The response returned by the promise is a stream object. When we call the json() method on the stream object, it returns another promise. The call to the json() method indicates that we are expecting a JSON response. For an XML response, you should use the text() method.

Make POST request using Fetch API

Just like Axios, Fetch also allows us to use any other HTTP method in the request: POST, PUT, DELETE, HEAD, and OPTIONS. All you need to do is set the method and body parameters in the fetch() options:

const user = {
  first_name: 'John',
  last_name: 'Lilly',
  job_title: 'Software Engineer'
}

const options = {
  method: 'POST',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json'
  }
}

fetch('https://reqres.in/api/users', options)
  .then(res => res.json())
  .then(res => console.log(res))

The Reqres API returns the body data back with an ID and created timestamp attached:

{  
   "first_name":"John",
   "last_name":"Lilly",
   "job_title":"Software Engineer",
   "id":"482",
   "createdAt":"2019-05-12T15:09:13.140Z"
}

Make DELETE request using Fetch API

The DELETE request looks very similar to the POST request, except body is not required:

const options = {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  }
}

fetch('https://reqres.in/api/users/2', options)
  .then(res => {
    if (res.ok) {
      return Promise.resolve('User deleted.')
    } else {
      return Promise.reject('An error occurred.')
    }
  })
  .then(res => console.log(res))

Error handling in Fetch API

Since the fetch() method returns a promise, error handling is easy. We can use the catch() method of the promise object to intercept any error thrown during the execution of the request.

However, no error will be thrown if the request hits the server and comes back, regardless of the server’s response. The promise returned by fetch() does not reject HTTP errors, even if the HTTP response code is 404 or 500.

Fortunately, you can use the ok property of the response object to check whether the request was successful or not:

fetch('https://reqres.in/api/users/22') // 404 Error
  .then(res => {
    if (res.ok) {
      return res.json()
    } else {
      return Promise.reject(res.status)
    }
  })
  .then(res => console.log(res))
  .catch(err => console.log(`Error with message: ${err}`))

Request headers (like Accept, Content-Type, User-Agent, Referer, etc.) are essential for any HTTP request. The Fetch API’s Headers object allows us to set, remove, or retrieve HTTP request headers.

We can create a header object using the Headers() constructor and then use the append, has, get, set, and delete methods to modify request headers:

// create an empty `Headers` object
const headers = new Headers()

// add headers
headers.append('Content-Type', 'text/plain')
headers.append('Accept', 'application/json')

// add custom headers
headers.append('X-AT-Platform', 'Desktop')
headers.append('X-AT-Source', 'Google Search')

// check if the header exists
headers.has('Accept') // true

// get headers
headers.get('Accept') // application/json
headers.get('X-AT-Source') // Google Search

// update header value
headers.set('Content-Type', 'application/json')

// remove headers
headers.delete('Content-Type')
headers.delete('X-AT-Platform')

We can also pass an array of arrays or an object literal to the constructor to create a header object:

// passing an object literal
const headers = new Headers({
  'Content-Type': 'application/json',
  Accept: 'application/json'
})

// OR

// passing an array of arrays
const headers = new Headers([
  ['Content-Type', 'application/json'],
  ['Accept', 'application/json']
])

To add headers to the request, create a Request instance and pass it to the fetch() method instead of the URL:

const request = new Request('https://reqres.in/api/users', {
  headers: headers
})

fetch(request)
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err))

Fetch API request object

The Request object represents a resource request and can be created by calling the Request() constructor:

const request = new Request('https://reqres.in/api/users')

The Request object also accepts a URL object:

const url = new URL('https://reqres.in/api/users')
const request = new Request(url)

By passing a Request object to fetch(), you can easily customize the request properties:

• method — An HTTP method like GET, POST, PUT, DELETE, HEAD
• url — The URL to the request, a string or a URL object
• headers — a Headers object for request headers
• referrer — referrer of the request (e.g., client)
• mode — The mode for cross-origin requests (e.g., cors, no-cors, same-origin)
• credentials — Should cookies and HTTP-Authorization headers go with the request? (e.g., include, omit, same-origin)
• redirect — The redirect mode of the request (e.g., follow, error, manual)
• integrity — The subresource integrity value of the request
• cache — The cache mode of the request (e.g, default, reload, no-cache)

Let us create a Request object with some customized properties and body content to make a POST request:

const user = {
  first_name: 'John',
  last_name: 'Lilly',
  job_title: 'Software Engineer'
}

const headers = new Headers({
  'Content-Type': 'application/json',
  Accept: 'application/json'
})

const request = new Request('https://reqres.in/api/users', {
  method: 'POST',
  headers: headers,
  redirect: 'follow',
  mode: 'cors',
  body: JSON.stringify(user)
})

fetch(request)
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err))

Only the first argument, the URL, is required. All these properties are read-only. You can not change their value once the request object is created. The Fetch API does not strictly require a Request object. The object literal, which we pass to the fetch() method, acts like a Request object:

fetch('https://reqres.in/api/users', {
  method: 'POST',
  headers: headers,
  redirect: 'follow',
  mode: 'cors',
  body: JSON.stringify(user)
})
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err))

Fetch API response object

The Response object returned by the fetch() method contains the information about the request and the response of the network request, including headers, status code, and status message:

fetch('https://reqres.in/api/users').then(res => {
  // get response headers
  console.log(res.headers.get('content-type))
  console.log(res.headers.get('expires'))

  // HTTP response status code
  console.log(res.status)

  // shorthand for `status` between 200 and 299
  console.log(res.ok)

  // status message of the response e.g. `OK`
  console.log(res.statusText)

  // check if there was a redirect
  console.log(res.redirected)

  // get the response type (e.g., `basic`, `cors`)
  console.log(res.type)

  // the full path of the resource
  console.log(res.url)
})

The response body is accessible through the following methods:

• json() returns the body as a JSON object
• text() returns the body as a string
• blob() returns the body as a Blob object
• formData() returns the body as a FormData object
• arrayBuffer() returns the body as an ArrayBuffer object

All these methods return a promise. Here is an example of text() method:

fetch('https://reqres.in/api/unknown/2')
  .then(res => res.text())
  .then(res => console.log(res))

The output of the above network call will be a JSON string:

'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'

Send cookies using Fetch API

When you use Fetch to get a resource, the request does not contain credentials such as cookies. If you want to send cookies, you have to explicitly enable credentials like the below:

fetch(url, {
  credentials: 'include'
})

Use async-await with Fetch API

Since Fetch is a promise-based API, we can go one step further and use the latest ES2017 async/await syntax to make our code even simpler and synchronous-looking:

const fetchUsers = async () => {
  try {
    const res = await fetch('https://reqres.in/api/users')
    if (!res.ok) {
      throw new Error(res.status)
    }
    const data = await res.json()
    console.log(data)
  } catch (error) {
    console.log(error)
  }
}

fetchUsers()

Conclusion

That’s all folks for introduction to JavaScript Fetch API. It is a significant improvement over XMLHttpRequest with a simple, elegant, and easy-to-use interface. Fetch works great for fetching network resources (even across the network inside the service workers).

The Fetch API is supported by all modern browsers, so there is no need to use any polyfill unless you want to support IE.

Read next: How to make HTTP requests using XHR in JavaScript.

✌️ Like this article? Follow me on
Twitter
and LinkedIn.
You can also subscribe to
RSS Feed.