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



  • 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
            })
        }
      }
    


  • 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
          })
      }
    }
    


  • 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