VueJs Axios和打字稿

Question

我获得了开发项目的基础。它由Vue和Typescript制成，在线支持不多。

我目前需要进行几次API调用以检查服务的可用性，并且必须在组件内部进行这些调用。由于某些原因，我无法确定如何执行此操作。

我目前拥有的是：

import * as Vue from 'vue';
import { Component } from 'vue-property-decorator';
import Axios, { AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse, AxiosStatic } from 'axios';

@Component({
(...)  
})

export class Something extends Vue {
    public $http: Axios;
constructor() {
    super();
    this.$http = Axios.create({
        baseURL: "https://swapi.co/api/people/1/"
    });
}

testFunc() {
    let data: any;
    this.$http.get("https://swapi.co/api/people/1/", data)
       .then((res: AxiosResponse) => {
        console.log(res.data);
     })
      .catch((ex: any) => {
        console.log(ex);
      });
 }


}

为了使它正常工作，我已经做了几处更改，因此，我粘贴的代码作为一种结构比其他任何东西都更为重要。我的视图中还有一个调用该testFunc（）的按钮。此外，Axios不会被识别为一种类型，即使我导入了“ axios”，它也无法正常工作。AxiosInstasnce确实有效，但是却无济于事。

Answer 1

我将 HTTP/REST 操作封装在单独的.ts文件中，然后从组件或 Vuex 存储中调用它们。这里我还使用 async/await 来获得更好的可读代码。每个方法都声明了其输入和返回类型。

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
}