3.6 KiB

Raw Blame History

Advanced

Hooks

Hooks can be used to globally intercept HTTP request and responses. E.g. if you wish to log errors, display a toast on error or need to dynamically modify requests.

See the API reference for the list of lifecycle hooks the HTTP module provides

These functions don't have to return anything by default.

Register Hooks

For registering hooks, you have to create a nuxt plugin:

nuxt.config.js

{
  modules: [
    '@nuxt/http',
  ],

  plugins: [
    '~/plugins/http'
  ]
}

plugins/http.js

import ky from 'ky-universal'

export default function ({ $http }) {
  $http.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $http.onRetry(async (request, options, errors, retryCount) => {
    const token = await ky('https://example.com/refresh-token')
    options.header.set('Authorization', `Bearer ${token}`)
  })

  $http.onError(error => {
    if (error.statusCode === 500) {
      alert('Request Error!')
    }
    // Tip: error.response will be undefined if the connection dropped to the server
    // Tip: You can use error.response.data to get response message
    // Tip: You can return an object or Promise as fallback response to avoid rejection
  })
}

Header Helpers

`setHeader(name, value)`

Globally set a header to all subsequent requests.

:::warning This method should probably not be called inside hooks as it is global and will apply to all future requests :::

:::tip Please note that HTTP headers are case-insensitive. Therefore all header names will be converted to lower-case to make sure that if you set the same header twice but with different casing the last one set will be used.

See also this comment in the Ky repository for more information :::

Parameters:

name: Name of the header
value: Value of the header

// Add header `Authorization: 123` to all requests
this.$http.setHeader('Authorization', '123')

// Override `Authorization` header with new value
this.$http.setHeader('Authorization', '456')

// Add header `Content-Type: application/x-www-form-urlencoded`
this.$http.setHeader('Content-Type', 'application/x-www-form-urlencoded')

// Remove default Content-Type header
this.$http.setHeader('Content-Type', false)

`setToken(token, type)`

Globally set Authorization header to all subsequent requests.

:::tip Note This is a global method, you only have to call it once after which all future requests will include the token :::

Parameters:

token: Authorization token
type: Authorization token prefix, usually Bearer. Defaults to nothing

// Adds header: `Authorization: 123` to all requests
this.$http.setToken('123')

// Overrides `Authorization` header with new value
this.$http.setToken('456')

// Adds header: `Authorization: Bearer 123` to all requests
this.$http.setToken('123', 'Bearer')

// Removes default Authorization header
this.$http.setToken(false)

Create new instance based on defaults

If you need to create your own ky instance which based on $http defaults, you can use the create(options) method.

// plugins/github.js
export default function ({ $http, env }, inject) {
  // Create a custom HTTP instance
  const $github = $http.create({
    // See https://github.com/sindresorhus/ky#options
  })

  // Set baseURL to something different
  $github.setBaseURL('https://api.github.com')
  $github.setToken(env.GITHUB_TOKEN, 'token')

  // Inject to context as $github
  inject('github', $github)
}

3.6 KiB Raw Blame History