METANIT.COM

XMLHttpRequest: status property

The read-only XMLHttpRequest.status property returns the numerical HTTP status code of the XMLHttpRequest ‘s response.

Before the request completes, the value of status is 0. Browsers also report a status of 0 in case of XMLHttpRequest errors.

Value

Examples

const xhr = new XMLHttpRequest(); console.log("UNSENT: ", xhr.status); xhr.open("GET", "/server"); console.log("OPENED: ", xhr.status); xhr.onprogress = () =>  console.log("LOADING: ", xhr.status); >; xhr.onload = () =>  console.log("DONE: ", xhr.status); >; xhr.send(); /** * Outputs the following: * * UNSENT: 0 * OPENED: 0 * LOADING: 200 * DONE: 200 */ 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 10, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Get status code javascript

Last updated: Jan 11, 2023
Reading time · 3 min

# Get the Status Code of a Fetch HTTP Response

Access the status property on the response object to get the status code of an HTTP request made with the fetch method.

The response.status property contains the HTTP status code of the response, e.g. 200 for a successful response or 500 for a server error.

Copied! 
async function makeRequest()  try  const response = await fetch('https://randomuser.me/api/'); console.log('response.status: ', response.status); // 👉️ 200 console.log(response); > catch (err)  console.log(err); > > makeRequest(); 

We awaited the response of calling the fetch method and assigned the result to a response variable.

To get the status code of the HTTP response, access the status property on the response object.

# Using Promise.then() instead of async/await

Here is an example that uses .then() and .catch() instead of async/await .

Copied! 
function makeRequest()  fetch('https://randomuser.me/api/') .then(response =>  console.log('response.status: ', response.status); // 👉️ 200 console.log(response); >) .catch(err =>  console.log(err); >); > makeRequest(); 

The status property on the response object will only be populated for HTTP responses.

If the server doesn’t respond at all, you encounter a CORS error or misspell the URL, you will get a network error.

The network error would run the catch() function and the status property would not be populated as it isn’t a server HTTP response.

# A complete example of handling error when using fetch

Here is a complete example of handling requests and errors using fetch .

Copied! 
async function makeRequest()  try  const response = await fetch('https://randomuser.me/api/'); console.log('status code: ', response.status); // 👉️ 200 if (!response.ok)  console.log(response); throw new Error(`Error! status: $response.status>`); > const result = await response.json(); return result; > catch (err)  console.log(err); > > makeRequest(); 

We used the response.ok property to check if the server responded with a status in the range of 200-299 .

If the server’s HTTP response was successful (200-299), the response.ok property will have a value of true , otherwise, it’s value will be false .

Fetch doesn’t reject the promise response for HTTP requests on its own, so we have to check if the ok property was set to false .

If the ok property is set to false , the request wasn’t successful and we have to throw an error on our own.

If there is a network error, e.g. a CORS error, or an error related to creating the HTTP request, the promise would get rejected automatically and our catch block would get triggered.

As previously noted, if there is a network error, the status property will not be populated as the error didn’t come from a server HTTP response.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to Get the Status Code of a Fetch HTTP Response in JavaScript

When you make a request on the web, the status code is what lets you know the status of the response.

This is useful because when you know the request failed, you can handle the error accordingly, or proceed with the data if the request was successful.

In this post, we will look at how to get the status code of a response when using the Fetch API in JavaScript.

How to get the status code of a response

To get the status code of a response, first let’s make a request:

Then, we can get the status code of the response by accessing the status property:

If the request was successful, the status code will be 200 .

Alternatively, you can check for response.ok which will return a boolean for you if the status code is between 200 and 299 .

Once successful, you can get the JSON, text, or blob data from the response:

To play it safe, you could wrap all your code inside a try/catch block:

Conclusion

In this post, we looked at how to get the status code of a response when using the Fetch API in JavaScript.

Simply call the status property on the response object to get the status code.

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник

Get status code javascript

Для представления ответа от сервера в Fetch API применяется интерфейс Response . Функция fetch() возвращает объект Promise, функция-коллбек в котором в качестве параметра получает объект Response с полученным от сервера ответом:

fetch("/hello").then(response => /* действия с response */ )

Либо можно использовать async/await для получения объекта Response

С помощью свойств объекта Response можно получить из полученного ответа различную информацию. Объект Response имеет следующие свойства:

• body : содержимое ответа в виде объекта ReadableStream
• bodyUsed : хранит булевое значение, которое указывает, было ли содержимое ответа уже использовано.
• headers : набор заголовков ответа в виде объекта Headers
• ok : хранит булевое значение, которое указывает, завершился ли запрос успешно (то есть если статусной код ответа находится в диапазоне 200-299)
• redirected : хранит булевое значение, которое указывает, является ли ответ результатом переадресации
• status : хранит статусный код ответа
• statusText : хранит сообщение статуса, которое соответствует статусному коду
• type : хранит тип ответа
• url : хранит адрес URL. Если в процессе запроса происходит ряд переадресаций, то хранит конечный адрес URL после всех переадресаций

Стоит отметить, что все эти свойства доступны только для чтения. Например, используем ряд свойств для получения информации об ответа сервера. Для этого определим следующий сервер на Node.js, который обрабатывает запросы:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.end("Fetch на METANIT.COM"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

На странице index.html вызовем функцию fetch и получим информацию об ответе:

Аналогичный пример с async/await:

getResponse(); async function getResponse() < const response = await fetch("/hello"); console.log(response.status); // 200 console.log(response.statusText); // OK console.log(response.url); // http://localhost:3000/hello >

Свойство ok возвращает true , если статусный код ответа в диапазоне от 200 до 299, что обычно говорит о том, что запрос успешно выполнен. И мы можем проверять это свойство перед ббработкой ответа:

Получение заголовков

С помощью свойства headers можно получить заголовки ответа, которые представляют интерфейс Headers .

Для получения данных из заголовков мы можем воспользоваться один из следующих методов интерфейса Headers:

• entries() : возвращает итератор, который позволяет пройтись по всем заголовкам
• forEach() : осуществляет перебор заголовков
• get() : возвращает значение определенного заголовка
• has() : возвращает true , если установлен определенный заголовок
• keys() : получает все названия установленных заголовков
• values() : получает все значения установленных заголовков

Например, получим все заголовки ответа:

Каждый заголовок представляет массив из двух элементов, где первый элемент — название заголовка, а второй — его значение.

Вывод консоли браузера в моем случае:

connection : keep-alive content-length : 22 date : Fri, 03 Dec 2021 17:09:34 GMT keep-alive : timeout=5

Другой пример — проверка заголовка и при его наличии вывод его значения:

Таким образом, мы можем получать и кастомные заголовки, которые устанавливаются на стороне сервера. Например, пусть сервер node.js устанавливает заголовок «Secret-Code»:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.setHeader("Secret-Code", 124); response.end("Fetch на METANIT.COM"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Для установки заголовка в node.js применяется метод response.setHeader() , первый параметр которого — название заголовка, а второй его значение.

Получим этот заголовок на веб-странице:

Если заголовок не установлен, то метод response.headers.get() возвращает null.

Переадресация

Если в процессе запроса произошла переадресация, то свойство redirected равно true , а свойство url хранит адрес, на который произошла переадресация. Например, пусть сервер на node.js выполняет переадресацию с адреса «/hello» на адрес «/newpage»:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response) < if(request.url == "/hello")< response.statusCode = 302; // 302 - код временной переадресации response.setHeader("Location", "/newpage"); // переадресация на адрес localhost:3000/newpage response.end(); >else if(request.url == "/newpage") < response.setHeader("Secret-Code", "New Page Code: 567"); // для теста устанавливаем заголовок response.end("This is a new page"); >else < fs.readFile("index.html", (error, data) =>response.end(data)); > >).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Выполним запрос по адресу «/hello» на веб-странице:

Произошел редирект на адрес http://localhost:3000/newpage New Page Code: 567

По консольному выводу, а именно по заголовку Secret-Code мы видим, что функция fetch получила ответ от нового адреса — «/newpage».

Источник