Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@ryotafull

<Angular> overrideでバックエンドとの処理をきれいに書く

あらまし

  • 複数人でフロントを作成
  • Angular で Class を一つ一つ作るのがめんどい
  • バックエンドの処理とやり取りをする Service の返り値として受け取る型(クラス)がまちまち
    • component もそれぞれ変わるから統一しにくい・見にくい

その状況の1打開策。↓↓

やったこと

エラーの返し方、レスポンスの取り方を統一して、Service での返り値は下記でいう
Response を必ず継承させたものにしておく。

error-response.ts
export class ErrorResponse {
    StatusCode:number
    ErrorMessage:string
}
response.ts
import { ErrorResponse } from './error-response'

export class Response {
    header:ErrorResponse
    result:any
}
hoge.ts
import { Response } from './response'

export class Hoge {
    name:string
    id:number
}
// レスポンスを継承でアプリ内で使うクラスごとに定義しなくてもよくなる
export class ResponseHoge extends Response {
    result:Hoge 
}

これで、、、

  • StatusCode
  • Name
  • Id

またある人は

  • statusCode
  • data
    • name
    • id

またまたある人は

  • statusCode
  • result
    • name
    • id

うおーーー
という状況がなくなり

各APIごとの返り値を揃えられる。

なので、componentで値を処理する動きも統一、さらにバックエンド側の処理も統一できるため、
コード内が非常に見やすくなると思います。

hoge.component.ts
get(){
    let sub = this.Api.getHoge().subscribe(
      res => {
        if(res.header.StatusCode != 200){
          window.alert('エラー')
        }else{
          window.alert('name:' + res.result.name + ' id:' + res.result.name)
        }
      },
      err => window.alert('接続エラー')
    )
  }

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?