recursal/MDN huggingface dataset:
Fetch basic concepts
====================

The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used `XMLHttpRequest`, but it provides a more powerful and flexible feature set. This article explains some of the basic concepts of the Fetch API.

**Note:** This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the MDN Web Docs chat rooms.

In a nutshell
-------------

At the heart of Fetch are the Interface abstractions of HTTP `Request`s, `Response`s, and `Headers`, along with a `fetch()` method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.

Service Workers is an example of an API that makes heavy use of Fetch.

Fetch takes the asynchronous nature of such requests one step further. The API is completely `Promise`-based.

Guard
-----

Guard is a feature of `Headers` objects, with possible values of `immutable`, `request`, `request-no-cors`, `response`, or `none`, depending on where the header is used.

When a new `Headers` object is created using the `Headers()` constructor, its guard is set to `none` (the default). When a `Request` or `Response` object is created, it has an associated `Headers` object whose guard is set as summarized below:

| new object's type | creating constructor | guard setting of associated `Headers` object |
| --- | --- | --- |
| `Request` | `Request()` | `request` |
| `Request()` with
 `mode` of `no-cors` | `request-no-cors` |
| `Response` | `Response()` | `response` |
| `Response.error()` or
 `Response.redirect()` methods
  | `immutable` |

A header's guard affects the `set()`, `delete()`, and `append()` methods which change the header's contents. A `TypeError` is thrown if you try to modify a `Headers` object whose guard is `immutable`. However, the operation will work if

* guard is `request` and the header *name* isn't a forbidden header name .
* guard is `request-no-cors` and the header *name*/*value* is a simple header .
* guard is `response` and the header *name* isn't a forbidden response header name .
XRAnchor: anchorSpace property
==============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`anchorSpace`** property of the `XRAnchor` interface returns an `XRSpace` object to locate the anchor relative to other `XRSpace` objects. It can be passed to `XRFrame.getPose()` subsequently.

Value
-----

An `XRSpace` object.

Examples
--------

### Updating anchors


```js
for (const anchor of frame.trackedAnchors) {
  const pose = frame.getPose(anchor.anchorSpace, referenceSpace);
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Anchors Module # dom-xranchor-anchorspace |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRAnchor: delete() method
=========================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`delete()`** method of the `XRAnchor` interface removes an anchor. This can be useful when an application is no longer interested in receiving updates to an anchor.

Syntax
------


```js
delete()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Removing all anchors


```js
let anchorsCollection = new Set();

// Upon creating anchors, add them to the Set
// anchorsCollection.add(anchor);

for (const anchor of anchorsCollection) {
  anchor.delete();
}

anchorsCollection.clear();
```

Specifications
--------------

| Specification |
| --- |
| WebXR Anchors Module # dom-xranchor-delete |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
GravitySensor: GravitySensor() constructor
==========================================

 The **`GravitySensor()`**
 constructor creates a new `GravitySensor` object which
 provides on each reading the gravity applied to the device along all three axes.

Syntax
------


```js
new GravitySensor()
new GravitySensor(options)
```

### Parameters

`options` Optional

Options are as follows:

`frequency`

 The desired number of times per second a sample should
 be taken, meaning the number of times per second that the
 `reading` event will be called. A whole number or decimal may be
 used, the latter for frequencies less than a second. The actual reading frequency
 depends on device hardware and consequently may be less than requested. The default
 frequency is the one defined by the underlying platform.


`referenceFrame`

 The local coordinate system representing
 the reference frame. It can be either `'device'` or
 `'screen'`. The default is `'device'`.



### Exceptions

`SecurityError` `DOMException`

Use of this feature was blocked by a Permissions Policy.

Specifications
--------------

| Specification |
| --- |
| Accelerometer # dom-gravitysensor-gravitysensor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `reading` event
CSSFontFaceRule: style property
===============================

The read-only **`style`** property of the `CSSFontFaceRule` interface returns the style information from the `@font-face` at-rule. This will be in the form of a `CSSStyleDeclaration` object.

Value
-----

A `CSSStyleDeclaration`.

Examples
--------

This example uses the CSS found as an example on the `@font-face` page. The first `CSSRule` returned will be a `CSSFontFaceRule`. The `style` property returns a `CSSStyleDeclaration` with the properties `fontFamily`, `fontWeight`, and `src` populated with the information from the rule.


```css
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].style); //a CSSStyleDeclaration
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontfacerule-style |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: display property
==========================

 The **`display`** property of the `FontFace` interface determines how a font face is displayed based on whether and when it is downloaded and ready to use.
 This property is equivalent to the CSS `font-display` descriptor.

 When this property is used, font loading has a timeline with three periods.
 The lengths of the first two periods depend on the value of the property and the user agent.
 (See below.)

block period

The browser invisibly prepares a fallback font. If the font face loads during this time, it's used to display the text and display is complete.

swap period

 If the font face is still not loaded, the fallback font will be shown.
 When the font face loads, the fallback will be swapped for the downloaded font.


failure period

If the font face still is not loaded, the fallback font will be shown and no swap will occur.

Value
-----

A string with one of the following values.

`auto`

Use the font display strategy provided by the user agent.

`block`

 Gives the font face a short block period and an infinite swap period.
 The spec recommends 3 seconds for the block period, though this may vary from browser to browser.


`fallback`

 Gives the font face a short block period and a short swap period.
 The spec recommends 100 ms or less for the block period and 3 seconds for the swap period, though these values may vary from browser to browser.


`optional`

 Gives the font face a short block period and no swap period.
 The spec recommends 100 ms or less, though this may vary from browser to browser.


`swap`

Gives the font face a 0 second block period and an infinite swap period.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-display |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: load() method
=======================

The **`load()`** method of the `FontFace` interface requests and loads a font whose `source` was specified as a URL. It returns a `Promise` that resolves with the current `FontFace` object.

If the `source` for the font face was specified as binary data, or the font `status` property of the font face is anything other than `unloaded`, then this method does nothing.

Syntax
------


```js
load()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a reference to the current `FontFace` object when the font loads or rejects with a `NetworkError` `DOMException` if the loading process fails.

### Exceptions

`NetworkError` `DOMException`

Indicates that the attempt to load the font failed.

Examples
--------

This simple example loads a font and uses it to display some text in a canvas element (with an id of `js-canvas`).
```

<canvas id="js-canvas"></canvas>
```



```js
const canvas = document.getElementById("js-canvas");

// load the "Bitter" font from Google Fonts
const fontFile = new FontFace(
  "FontFamily Style Bitter",
  "url(https://fonts.gstatic.com/s/bitter/v7/HEpP8tJXlWaYHimsnXgfCOvvDin1pK8aKteLpeZ5c0A.woff2)",
);
document.fonts.add(fontFile);

fontFile.load().then(
  () => {
    // font loaded successfully!
    canvas.width = 650;
    canvas.height = 100;
    const ctx = canvas.getContext("2d");

    ctx.font = '36px "FontFamily Style Bitter"';
    ctx.fillText("Bitter font loaded", 20, 50);
  },
  (err) => {
    console.error(err);
  },
);
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # font-face-load |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: loaded property
=========================

The **`loaded`** read-only property of the `FontFace` interface returns a `Promise` that resolves with the current `FontFace` object when the font specified in the object's constructor is done loading or rejects with a `SyntaxError`.

Value
-----

A `Promise` that resolves with the current `FontFace` object.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-loaded |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: style property
========================

The **`style`** property of the `FontFace` interface retrieves or sets the font's style.

This property is equivalent to the `font-style` descriptor.

Value
-----

A string containing the descriptors defined in the style sheet's `@font-face` rule.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-style |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: featureSettings property
==================================

The **`featureSettings`** property of the `FontFace` interface retrieves or sets infrequently used font features that are not available from a font's variant properties.

This property is equivalent to the `font-feature-settings` descriptor.

Value
-----

A string containing a descriptor.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-featuresettings |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: stretch property
==========================

The **`stretch`** property of the `FontFace` interface retrieves or sets how the font stretches.

This property is equivalent to the `font-stretch` descriptor.

Value
-----

A string containing a descriptor as it would be defined in a style sheet's `@font-face` rule.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-stretch |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: FontFace() constructor
================================

The **`FontFace()`** constructor creates a new `FontFace` object.

Syntax
------


```js
new FontFace(family, source)
new FontFace(family, source, descriptors)
```

### Parameters

`family`

Specifies a font family name that can be used to match against this font face when styling elements.

 Takes the same type of values as the `font-family` descriptor of `@font-face`.
 This value may also be read and set using the `FontFace.family` property.


`source`

 The font source.
 This can be either:


* A URL to a font face file.
* Binary font face data in an `ArrayBuffer` or a `TypedArray`.

`descriptors` Optional

 A set of optional descriptors passed as an object.
 It can contain any of the descriptors available for `@font-face`:


`ascentOverride`

With an allowable value for `@font-face/ascent-override`.

`descentOverride`

With an allowable value for `@font-face/descent-override`.

`display`

With an allowable value for `@font-face/font-display`.

`featureSettings`

With an allowable value for `font-feature-settings`.

`lineGapOverride`

With an allowable value for `@font-face/line-gap-override`.

`stretch`

With an allowable value for `@font-face/font-stretch`.

`style`

With an allowable value for `@font-face/font-style`.

`unicodeRange`

With an allowable value for `@font-face/unicode-range`.

`variationSettings`

With an allowable value for `@font-face/font-variation-settings`.

`weight`

With an allowable value for `@font-face/font-weight`.


### Exceptions

`SyntaxError` `DOMException`

 Thrown when a descriptor string does not match the grammar of the corresponding `@font-face` descriptor, or the specified binary source cannot be loaded.
 This error results in `FontFace.status` being set to `error`.


Examples
--------


```js
async function loadFonts() {
  const font = new FontFace("myfont", "url(myfont.woff)", {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);
  // enable font with CSS class
  document.body.classList.add("fonts-loaded");
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # font-face-constructor |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `@font-face`
FontFace: family property
=========================

The **`FontFace.family`** property allows the author to get or set the font family of a `FontFace` object.

 The value is used for name matching against a particular font face when styling elements using the `font-family` property.
 Any name may be used, and this overrides any name specified in the underlying font data.

This property is equivalent to the `font-family` descriptor of `@font-face`.

Value
-----

A string.

Examples
--------


```js
let fontFace = new FontFace(
  "Roboto",
  "url(https://fonts.example.com/roboto.woff2)",
);
console.log(fontFace.family); // 'Roboto'

fontFace.family = "newRoboto";
console.log(fontFace.family); // 'newRoboto'
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-family |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: lineGapOverride property
==================================

 The **`lineGapOverride`** property of the `FontFace` interface returns and sets the value of the `@font-face/line-gap-override` descriptor.
 The possible values are `normal`, indicating that the metric used should be obtained from the font file, or a percentage.

Value
-----

A string.

Examples
--------


```js
let fontFace = new FontFace(
  "Roboto",
  "url(https://fonts.example.com/roboto.woff2)",
  { lineGapOverride: "90%" },
);
console.log(fontFace.lineGapOverride); // 90%
fontFace.lineGapOverride = "normal";
console.log(fontFace.lineGapOverride); // 'normal'
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacedescriptors-linegapoverride |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: variationSettings property
====================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`variationSettings`** property of the `FontFace` interface retrieves or sets low-level OpenType or TrueType font variations.

This property is equivalent to the `font-variation-settings` descriptor.

Value
-----

A string containing a descriptor.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacedescriptors-variationsettings |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: status property
=========================

The **`status`** read-only property of the `FontFace` interface returns an enumerated value indicating the status of the font, one of `"unloaded"`, `"loading"`, `"loaded"`, or `"error"`.

Value
-----

One of `"unloaded"`, `"loading"`, `"loaded"`, or `"error"`.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-status |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: descentOverride property
==================================

 The **`descentOverride`** property of the `FontFace` interface returns and sets the value of the `@font-face/descent-override` descriptor.
 The possible values are `normal`, indicating that the metric used should be obtained from the font file, or a percentage.

Value
-----

A string.

Examples
--------


```js
let fontFace = new FontFace(
  "Roboto",
  "url(https://fonts.example.com/roboto.woff2)",
  { descentOverride: "90%" },
);
console.log(fontFace.descentOverride); // 90%
fontFace.descentOverride = "normal";
console.log(fontFace.descentOverride); // 'normal'
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacedescriptors-descentoverride |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: weight property
=========================

The **`weight`** property of the `FontFace` interface retrieves or sets the weight of the font.

This property is equivalent to the `font-weight` descriptor.

Value
-----

A string containing a descriptor as it would be defined in a style sheet's `@font-face` rule.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-weight |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: unicodeRange property
===============================

The **`unicodeRange`** property of the `FontFace` interface retrieves or sets the range of unicode code points encompassing the font.

This property is equivalent to the `unicode-range` descriptor.

Value
-----

A string containing a descriptor as it would appear in a style sheet's `@font-face` rule.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-unicoderange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: variant property
==========================

 The **`variant`** property of the
 `FontFace` interface programmatically retrieves or sets font variant
 values.

Value
-----

 A string containing a descriptor as it would be defined in a style
 sheet's `@font-face` rule.

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontface-variant |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
FontFace: ascentOverride property
=================================

The **`ascentOverride`** property of the `FontFace` interface returns and sets the ascent metric for the font, the height above the baseline that CSS uses to lay out line boxes in an inline formatting context.

This property is equivalent to the `@font-face/ascent-override` descriptor of `@font-face`.

Value
-----

A string. The possible values are `normal`, indicating that the metric used should be obtained from the font file, or a percentage.

This property accepts the same values as the `@font-face/ascent-override` descriptor.

Examples
--------


```js
let fontFace = new FontFace(
  "Roboto",
  "url(https://fonts.example.com/roboto.woff2)",
  { ascentOverride: "90%" },
);
console.log(fontFace.ascentOverride); // 90%
fontFace.ascentOverride = "normal";
console.log(fontFace.ascentOverride); // 'normal'
```

Specifications
--------------

| Specification |
| --- |
| CSS Font Loading Module Level 3 # dom-fontfacedescriptors-ascentoverride |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.