Javascript http request api

Request

The Request interface of the Fetch API represents a resource request.

You can create a new Request object using the Request() constructor, but you are more likely to encounter a Request object being returned as the result of another API operation, such as a service worker FetchEvent.request .

Constructor

Creates a new Request object.

Instance properties

Stores true or false to indicate whether or not the body has been used in a request yet.

Contains the cache mode of the request (e.g., default , reload , no-cache ).

Contains the credentials of the request (e.g., omit , same-origin , include ). The default is same-origin .

Returns a string describing the request’s destination. This is a string indicating the type of content being requested.

Contains the associated Headers object of the request.

Contains the subresource integrity value of the request (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE= ).

Contains the request’s method ( GET , POST , etc.)

Contains the mode of the request (e.g., cors , no-cors , same-origin , navigate .)

Contains the mode for how redirects are handled. It may be one of follow , error , or manual .

Contains the referrer of the request (e.g., client ).

Contains the referrer policy of the request (e.g., no-referrer ).

Returns the AbortSignal associated with the request

Contains the URL of the request.

Instance methods

Returns a promise that resolves with an ArrayBuffer representation of the request body.

Returns a promise that resolves with a Blob representation of the request body.

Creates a copy of the current Request object.

Returns a promise that resolves with a FormData representation of the request body.

Returns a promise that resolves with the result of parsing the request body as JSON .

Returns a promise that resolves with a text representation of the request body.

Note: The request body functions can be run only once; subsequent calls will reject with TypeError showing that the body stream has already used.

Examples

In the following snippet, we create a new request using the Request() constructor (for an image file in the same directory as the script), then return some property values of the request:

const request = new Request("https://www.mozilla.org/favicon.ico"); const url = request.url; const method = request.method; const credentials = request.credentials; 

You could then fetch this request by passing the Request object in as a parameter to a fetch() call, for example:

fetch(request) .then((response) => response.blob()) .then((blob) =>  image.src = URL.createObjectURL(blob); >); 

In the following snippet, we create a new request using the Request() constructor with some initial data and body content for an API request which need a body payload:

const request = new Request("https://example.com",  method: "POST", body: '', >); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyUsed = request.bodyUsed; 

Note: The body can only be a Blob , an ArrayBuffer , a TypedArray , a DataView , a FormData , a URLSearchParams , a ReadableStream , or a String object, as well as a string literal, so for adding a JSON object to the payload you need to stringify that object.

You could then fetch this API request by passing the Request object in as a parameter to a fetch() call, for example and get the response:

fetch(request) .then((response) =>  if (response.status === 200)  return response.json(); > else  throw new Error("Something went wrong on API server!"); > >) .then((response) =>  console.debug(response); // … >) .catch((error) =>  console.error(error); >); 

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 Jul 10, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Запросы к Rest API из JavaScript компактно и красиво

Делал я тут небольшой проект на чистом JS и в ходе оного потребовалось работать с Rest API. Ну не ручками ведь XMLHttpRequest дёргать, решил я, наверняка есть бесчисленное количество готовых решений для такой простой задачи.

Как можно догадаться по КДПВ, я несколько ошибался; впрочем, обо всём по порядку. Но если вкратце — получился вот такой симпатичный велосипедик, с которым запросы к Rest API получаются, как и обещано в заголовке, компактными и красивыми.

Кандидаты

Итак, мне был нужен джаваскриптовский клиент для Rest API. Гугл выдал чуток библиотек — restful.js, rest, amygdala. На самом деле, была ещё вот такая библиотечка, но это плагин к jQuery. jQuery в проекте не используется и тащить его как-то не хотелось; но, отчасти, предлагаемый библиотекой синтаксис мне понравился и это ещё всплывёт впоследствии.

Amygdala отпала сразу — нет Promise, а значит нет и async/await. Ещё и границы функциональности у неё странные, amygdala скорее претендует на что-то вроде недо-data-layer; про отсутствие сбилженной версии и лишние зависимости я тактично умолчу.
Осталось два кандидата — restful.js и rest.

rest предлагает некое минимальное ядро и даёт широкие возможности по его кастомизации с помощью так называемых «перехватчиков» — interceptors в оригинале. Не знаю насколько это круто — перспектива строить полные урлы и указывать метод руками при каждом запросе меня вовсе не прельщала, перехватчиков для модификации этого поведения не наблюдалось, да и документация восторга не вызывала. Я перешёл к последнему варианту — restful.js.

A pure JS client for interacting with server-side RESTful resources. Think Restangular without Angular.

Вообще-то я предпочитаю Ember, но какая разница? Главное-то что б использовать удобно было!

const articleCollection = api.all('articles'); // http://api.example.com/articles // http://api.example.com/articles/1 api.one('articles', 1).get().then((response) => < const articleEntity = response.body(); // if the server response was < id: 1, title: 'test', body: 'hello' >const article = articleEntity.data(); article.title; // returns `test` article.body; // returns `hello` // You can also edit it article.title = 'test2'; // Finally you can easily update it or delete it articleEntity.save(); // will perform a PUT request articleEntity.delete(); // will perform a DELETE request >, (response) => < // The reponse code is not >= 200 and < 400 throw new Error('Invalid response'); >);

Это пример из документации. Выглядит неплохо в сравнении с конкурентами, да и документация достаточно внятная… Вариантов-то всё равно больше не наблюдается. Берём? Берём.

Небольшое лирическое отступление

Есть такая концепция «разумного умолчания», которая предполагает, если пересказывать своими словами, что решение некоей проблемы заточено, условно, под 90% юзкейсов, а в остальных 10% нужно явно сказать что имеются особенные обстоятельства.

Тривиальный пример этой концепции — параметры по умолчанию в большинстве языков программирования.

Куда менее тривиальный пример (являющийся, тем не менее, просто обобщением предыдущего) — оптимизация любого интерфейса исходя из ожидаемого поведения пользователя, будь то интерфейс командный, графический, программный или вообще физический: рубильники там, кнопочки и прочие хардварные крутилки-вертелки.

Общая стратегия этих оптимизаций одинакова — 90% пользователей для достижения своих целей должны производить так мало действий, как это вообще возможно. Не будет большим преувеличением сказать что это общая формула прогресса — изобретение всё более и более простых, с точки зрения количества необходимых телодвижений, интерфейсов для решения всё тех же задач.
И, в общем-то, эти самые разумные умолчания — один из главных способов упрощения.

Зачем я играю в Капитана Очевидность, растекаясь мысью по древу? Потому что очередной велосипед — это просто очередной велосипед, а вот велосипед с подведённой под него философской базой уже не просто очередной велосипед, а даже может издали и на мотоцикл смахивать!
Конец небольшого лирического отступления.

restful.js

Итак, restful.js. Использовал я его крайне недолго — и пары дней не прошло, как я понял что:

Каждый раз явно вызывать all() — не круто.

let games = (await api.games.get()).body().data(); //

var api = new RestClient('https://api.github.com'); api.res(); api.repos('Amareis/another-rest-client').releases('latest').get().then(function(release)< console.log(release); document.write('Latest release of another-rest-client:
'); document.write('Published at: ' + release.published_at + '
'); document.write('Tag: ' + release.tag_name + '
'); >);

var api = new RestClient('http://example.com/api/v1'); api.res(< //or it gets object and returns object where resource is available by name dogs: [ 'toys', 'friends'], cats: 0, humans: 'posts' >); /* last string is equal to: api.res('dogs').res(['toys', 'friends']); api.res('cats'); api.res('humans').res('posts'); */ api.dogs(1337).toys.get(); //GET http://example.com/api/v1/dogs/1337/toys api.dogs(1337).friends(2).delete(); //DELETE http://example.com/api/v1/dogs/1337/friends/2 //POST http://example.com/api/v1/humans/me/posts, body="" api.humans('me').posts.post();

var me = api.humans('me'); var i = await me.get(); console.log(i); //just object, i.e. var post = await me.posts.post() console.log(post); //object