# Fetch

The Fetch API.

# State

The useFetch function exposes the following reactive state:

import { useFetch } from 'vue-use-web';

const { isLoading, response, error, success } = useFetch('http://myurl.com');
State Type Description
error Boolean If the request resulted in a non 200 status code.
headers Record<string, string> The response headers.
isLoading Boolean If the request is pending.
response any The response body as JSON or the raw response body as a string (depending on the content-type).
status number The HTTP status code.
statusText number The HTTP status text, eg: "OK" for 200.
success Boolean If the request is successful. i.e resulted in 200 status code.
type string Response type.

# Methods

The useFetch function exposes the following methods:

import { useFetch } from 'vue-use-web';

const { cancel } = useFetch(elem);
Signature Description
cancel Cancels the fetch request if browser supports AbortController, otherwise the request will complete but will not update the state.

# Example

<template>
  <div>
    <div>{{ isLoading }}</div>
    <div>{{ success }}</div>
    <div>{{ response }}</div>
    <div>{{ cancelled }}</div>
    <button @click="cancel">Cancel Request</button>
  </div>
</template>

<script>
import { useFetch } from 'vue-use-web';

export default {
  setup() {
    const { isLoading, error, success, cancel, response, cancelled } = useFetch('/data.json');

    return { isLoading, error, success, cancel, response, cancelled };
  }
};
</script>

TODO: useFetch example