Use Axios In Vue

Posted on  by admin

Modified2 years ago. I would like to use axios in vue (Typescript) but I get into trouble with my code.

This is my main.ts. and this is my vue codescreenshot here. This is the first time I use typescript,before I used it another way in javaScript and I did not have any problem, so how can I use it in TypeScript?

GET calls

Thank you for your time and solution. 3030 bronze badges. I'm encapsulate HTTP/REST operations in separate .ts files. Here I also use async/await to have better readable code. Each method declared its input and return types.

Andreas BauerAndreas Bauer. Are you sure to use POST request? It seems like GET request because of 'GetTreeTenant' and you can try only axios instead $axios.

Conclusions

In typescript,we can use module augmentation.https://vuejs.org/v2/guide/typescript.html#%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8.

  1. I want to suggest you use a service for your http request using axios. I would do this by separating my http services into separate files.
  2. Say you have an API and you use a resource say hero then the code will look something like this:. For hero service you could do this:. 33 gold badges3737 silver badges4343 bronze badges.

4343 bronze badges. One quick and dirty solution would be to set your Vue object to type any. TypeScript is letting you know that it doesn't recognize the $axios property on the Vue Object.

When you tell TypeScript that the Vue object can be anything, you're allowed to add whatever properties you want. Post originally written by me in Spanish 🇪🇸 on my blog:. VueJS as opposite of Angular, not comes with a predefined way of making HTTP calls.

Vue.js + Axios tutorial for beginner