@watch-state/fetch

Fetch with watch-state
Based on @watch-state/async

Install

npm

npm i @watch-state/fetch

yarn

yarn add @watch-state/fetch

Usage

Fetch is a Promise like class.

Fetch extends @watch-state/async

import Fetch from '@watch-state/fetch'

const user = await new Fetch('https://reqres.in/api/users/1')

then, catch, finally

Use then, catch and finally like with Promise

const user = new Fetch('https://reqres.in/api/users/1')
user
  .then(data => console.log('then', data))
  .catch(error => console.log('catch', error))
  .finally(() => console.log('finally'))

loading

You may check status of the request with loading field, it's true when data is loading. This field is observable.

const user = new Fetch('https://reqres.in/api/users/1')
// user.loading === true
// but request does not happen

await user
// await triggers request
// user.loading === false

loaded

You may check status of the request with loaded field, it's true if the data is loaded at least one time. This is an observable field.

const user = new Fetch('https://reqres.in/api/users/1')
// user.loaded === false

await user
// user.loaded === true

value

You may get result with value. This is an observable field.

const user = new Fetch('https://reqres.in/api/users/1')

new Watch(() => console.log(user.loading ? 'loading...' : user.value))
// Watch from watch-state

error

You may handle errors or responses with error status by error field.
This is an observable field.

const user = new Fetch('https://reqres.in/api/users/23')
// returns 404 user not found

new Watch(() => console.log(
  user.loading ? 'loading...' : user.error || user.value
))

type

You can convert the response to json | text | blob | arrayBuffer | formData.

const user = new Fetch('https://reqres.in/api/users/1', {
  type: 'text'
})

default value

You may provide default value for Fetch

Option of type equals json by default

const user = new Fetch('https://reqres.in/api/users/1', {
  defaultValue: {
    data: { id: null }
  }
})

// user.value.data.id === null

await user
// user.value.data.id === 1

update

Unlike a Promise, you may reuse Fetch with update method

const user = new Fetch('https://reqres.in/api/users/1')

await user
// request to https://reqres.in/api/users/1

user.update()

await user
// request to https://reqres.in/api/users/1

You can set timeout to make update only after some time.

const user = new Fetch('https://reqres.in/api/users/1')

await user
// request to https://reqres.in/api/users/1

user.update(1000)
// nothing happends

await user
// nothing happends

await new Promise(resolve => setTimeout(resolve, 1000))
// nothing happends

// 1 second passed, if use 1000ms it triggers update
user.update(1000)

await user
// request to https://reqres.in/api/users/1

response

If you want to know the status of the response or headers you can use response field.

const user = new Fetch('https://reqres.in/api/users/23')

// user.response === undefined

await user

// user.response.ok === false
// user.response.status === 404

It's better if you extend Fetch class to get it.

import { cache } from '@watch-state/decorators'
import Fetch from '@watch-state/fetch'

class StatusFetch extends Fetch {
  @cache get status () {
    return this.response?.status
  }
}

const user = new StatusFetch('https://reqres.in/api/users/23')

// user.status === undefined

await user

// user.status === 404

Issues

If you find a bug, please file an issue on GitHub