我得到了一个开发项目的基地。它是用 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);
});
}
}
为了让它工作,我已经改变了几件事,因此我粘贴的代码比其他任何东西都更重要。我的 View 中还有一个按钮调用 testFunc()。此外,Axios 不会被识别为一种类型,即使我导入“axios”,它也不起作用。 AxiosInstasnce 确实有效,但无济于事。
最佳答案
我将 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
}
关于javascript - VueJs Axios 和 Typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47327551/