TWSNMP MV開発４日目：TWSNMP FCと通信する処理をクラスで作ってみた

今朝は助手の猫さんが６時少し前に起こしてくれました。
ご飯をあげた後も甘えたかったようで開発中にまた呼びにきました。撫でていたら、かみさんも起きてきたのでバトンタッチしました。

TWSNMP MVの開発の続きです。今朝はTWSNMP　FCと通信する部分を作ることにしました。
２年ぐらい前に作ったPWA

のソースコードを流用しようと思いつきました。

// FileZenへログインする関数
export const login = async (user,password) => {
  try {
    const res = await fetch('APIURL/login', {
      method: 'POST',
      headers: {
      'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        UserID: user,
        Password: password,
      })
    })
    return await res.json();
  } catch (e) {
    console.log(e);
    return undefined;
  }
}

関数がいくつかありました。せっかくTypeScriptで開発するのでクラスにしてみようと思いました。

export class TwsnmpAPI {
  url: string
  token: string
  constructor(url: string) {
    this.url = url;
    this.token = '';
  }
  async login(user:string,password:string) :Promise<boolean>  {
    try {
      const res = await fetch(this.url + '/login', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          UserID: user,
          Password: password,
        })
      })
      if (res.status == 200) {
        const r = await res.json();
        console.log(r);
        if (r && r.token ) {
          this.token = r.token;
          return true;
        }
      }
      return false;
    } catch (e) {
      console.log(e);
      return false;
    }
  }

これを

<script>
  import {TwsnmpAPI} from "./lib/twsnmpapi";
  import { Alert,Button } from 'flowbite-svelte';
  let loginOK = false;
  let loginNG = false;
  let api = new TwsnmpAPI("http://localhost:8080");
  const login = async () => {
    loginOK = await api.login("twsnmp","twsnmp");
    loginNG = !loginOK;
  }
</script>

<div class="p-8">
  {#if loginOK}
   <Alert color="indigo">ログイン成功</Alert>
  {/if}
  {#if loginNG}
    <Alert>ログイン失敗</Alert>
  {/if}
  <Button color="blue"  on:click={login}>ログイン</Button>
</div>

のようなコードでテストしてみました。

TWSNMP　MVのログインテスト

うまくいきました。URL、ユーザー名、パスワードを間違えるとエラーになることも試しました。これで、実際のデータで画面を試していけそうです。
クラスを使って作ると、なんだか高度な開発に見えてきます。

明日に続く