Usage

Component

asyncData

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

methods/created/mounted/etc

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

Store Actions

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

$ Shortcuts

Axios plugin also supports shortcuts with $ prefixed methods to directly get data:

// Normal usage with axios
let data = (await $axios.get('...')).data

// Fetch Style
let data = await $axios.$get('...')

Cancel token

You can cancel a request using a cancel token.

The axios cancel token API is based on the withdrawn cancelable promises proposal.

You can create a cancel token using the CancelToken.source factory as shown below:

const source = this.$axios.CancelToken.source()

this.$axios.$get('/user/12345', {
  cancelToken: source.token
}).catch(error => {
  if (this.$axios.isCancel(error)) {
    console.log('Request canceled', error)
  } else {
    // handle error
  }
})

this.$axios.$post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.')

You can also create a cancel token by passing an executor function to the CancelToken constructor:

const { CancelToken } = this.$axios
let cancel

this.$axios.$get('/user/12345', {
  cancelToken: new CancelToken(c => {
    // An executor function receives a cancel function as a parameter
    cancel = c
  }),
})

// cancel the request
cancel()

Note: you can cancel several requests with the same cancel token.

Edit this page on GitHub Updated at Mon, Sep 19, 2022