Is there any Vue-centric way to access external APIs?

[flachica]

I do not know if the proper way to access the Internet from Quasar is the one I mention below. What I have pursued is to separate Internet access from the component itself.

I have made an axios wrapper like the one shown here. Then in the export default of my component I created the api object with functions that use it.

Is there a way to make it better? Is there an official Axios wrap that can be used in Quasar?

This is the example. this.$payavoyapi is the axios wrapper

methods: {
    api () {
      let self = this
      return {
        login (imei, password) {
          var loginInfo = {
            'strategy': 'local',
            'imei': imei,
            'password': password
          }
          return self.$payavoyapi({
            url: '/authentication',
            method: 'POST',
            data: loginInfo
          })
            .then((response) => {
              self.$axios.defaults.headers.common = {
                'Authorization': 'Bearer ' + response.accessToken
              }
            })
        },
        basicGET () {
          return self.$payavoyapi({
            url: 'hello/world',
            method: 'GET'
          })
        }
      }
    },
    testBackend () {
      this.loading = true
      let api = this.api()
      api.login('12345', 'secret')
        .then(() => api.basicGET())
        .then((response) => {
          this.text = response.text
          this.loading = false
        })
        .catch((error) => {
          var notice = {
            color: 'negative',
            position: 'top',
            message: 'Test failed. ' + (error.message || error.statusText),
            icon: 'report_problem'
          }
          this.$q.notify(notice)
          console.log(error)
          this.loading = false
        })
    }
  }

[a47ae]

Hey, there is no “official” way, but I can tell you what we did with our API endpoints.
We have a directory /src/api. In this directory, each file represents an API endpoint.
All files extend a simple REST client which uses axios and has methods like list, create, update and delete.

The crucial point here is that each file exports a class by default.

// Simplified example
// src/api/demo.js
import axios from 'axios'

export default class DemoClient {
  list () {
    return axios.get('/my/api/endpoint')
  }
}

Also, note that the methods return the axios promise.

Not in your components you can import your client and use it.

// demo.vue
import  DemoClient from  'src/api/demo.js'

export default {
  data () {
    return {
      demoData: []
    }
  },

  created () {
    DemoClient.list()
      .then(response => {
        this.demoDate = response.data
      })
  }
}

[leopiccionia]

There isn’t an official or “curated” Vue HTTP library for some time, as Vue team now understands that it wouldn’t fill any role that a third-party library like Axios couldn’t.

However, maybe you were searching for something like this? https://github.com/huanleguang/v-model