Implement api client and add first test call to create api

This commit is contained in:
Tim 2021-07-05 01:34:57 +02:00
parent 775fa68909
commit 9b76a4e3ca
4 changed files with 55 additions and 4 deletions

16
src/objects/objects.ts Normal file
View File

@ -0,0 +1,16 @@
export interface ApiObject {
}
export interface ResponseObject<T extends ApiObject> {
date: T
}
export interface PlayerObject {
id: string,
name: string,
}
export interface CreateGameObject extends ApiObject {
player: PlayerObject,
code: string,
}

View File

@ -1,6 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router' import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -8,7 +7,7 @@ const routes: Array<RouteConfig> = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: Home component: () => import('../views/Home.vue')
}, },
{ {
path: '/about', path: '/about',

28
src/services/PerudoApi.ts Normal file
View File

@ -0,0 +1,28 @@
import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
import {ApiObject, CreateGameObject} from "@/objects/objects";
export default class PerudoApi {
private static baseUrl = 'http://localhost:8000/'
private static objectInstance?: PerudoApi;
public static get instance(): PerudoApi {
if(typeof PerudoApi.objectInstance === 'undefined') {
PerudoApi.objectInstance = new PerudoApi();
}
return PerudoApi.objectInstance;
}
public createGame(name: string):Promise<CreateGameObject> {
return this.get<CreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
.then((response: AxiosResponse<CreateGameObject>) => {
return response.data;
})
}
private get<T = any>(url: string, getParameters?: Record<string, any>) {
return axios.get(url).then((response: AxiosResponse<T>) => {
return response;
})
}
}

View File

@ -7,12 +7,20 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from 'vue-property-decorator' import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'
import PerudoApi from "@/services/PerudoApi";
import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
@Component({ @Component({
components: { components: {
HelloWorld HelloWorld
} }
}) })
export default class Home extends Vue {} export default class Home extends Vue {
public mounted() {
PerudoApi.instance.createGame('Tosti').then((response: CreateGameObject) => {
console.log(response);
})
}
}
</script> </script>