http/docs/guide/usage.md

1.6 KiB

Usage

Making Requests

See the API reference for a list of available HTTP methods

Calling a HTTP methods returns a Promise that resolves to a Reponse object or rejects in case of network errors.

You can use methods to convert response stream into usable data:

  • json
  • text
  • formData
  • arrayBuffer
  • blob

See ky docs for all available options.

Example: Get a json file

await $http.get('https://unpkg.com/nuxt/package.json').json()

Alternatively for json only you can use $ prefixed shortcut:

await $http.$get('https://unpkg.com/nuxt/package.json')

Example: Post with JSON body

await $http.post('http://api.con', { foo: 'bar' })

Using in asyncData

For asyncData and fetch you can access instance from context:

async asyncData({ $http }) {
  const ip = await $http.get('http://icanhazip.com').text()
  return { ip }
}

Using in Component Methods

:::warning Note this is not available in Nuxt's asyncData method, see here for how to use this module in asyncData :::

When you have access to this, you can use this.$http:

methods: {
  async fetchSomething() {
    const ip = await this.$http.get('http://icanhazip.com').text()
    this.ip = ip
  }
}

Using in Store

For store actions you can also use this.$http:

// In store
{
  actions: {
    async getIP ({ commit }) {
      const ip = await this.$http.get('http://icanhazip.com').text()
      commit('SET_IP', ip)
    }
  }
}