How to use axios in Vue (Typescript)?

Question

I would like to use axios in vue (Typescript) but I get into trouble with my code. This is my main.ts

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://192.168.1.225:8088'

and this is my vue code screenshot 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?

Thank you for your time and solution.

Answer 1

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.

import axios from 'axios'

const http = axios.create({
  baseURL: `${SOME_SERVICE_URL}/base-path`,
  headers: { 'Content-Type': 'application/json' }
})

export async function getItemById (itemId: string): Promise<Item> {
  const response = await http.get(`/${itemId}`)
  return response.data
}

export async function createItem (item: Item): Promise<Item> {
  const response = await http.post('/', JSON.stringify(item))
  return response.data
}