VueJs Axios 和 Typescript

Posted 2023-02-22

【中文标题】VueJs Axios 和 Typescript

【英文标题】：VueJs Axios and Typescript

【发布时间】：2018-04-29 20:48:38

【问题描述】：

我得到了一个开发项目的基地。用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 确实有效，但无济于事。

【问题讨论】：

关于该问题的任何更新。

这是半年前的事了。我不在同一家公司工作，但我可以稍后检查我所做的工作以修复它。你有同样的问题吗？

我真的做到了。但最好写出你的解决方案。

【参考方案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