技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

axiosでresponseデータのフィールドにアクセスする方法【Go】

クライアントとサーバーの通信を、クライアントではaxiosを用いる例です。
ユーザーに関する情報をサーバーでデータベースに保存しておき、
ログイン後のページで、そのデータを利用して表示を変えることを想定します。

例えば次のコードを見てみます。

goファイル

var dbSessions = make(map[string]session)
var dbUsers = make(map[string]user)

type session struct {
    un           string
    lastActivity time.Time
}
type user struct {    // JSONに整形するため、フィールドの頭文字は大文字
    UserName, First, Last, Role string
    Password                    []byte
    Pics                        []string
}

func main() {
    ...
    http.HandleFunc("/someFunc", someFunc)
    http.Handle("/favicon.ico", http.NotFoundHandler())
    http.ListenAndServeTLS(":10443", "cert.pem", "key.pem", nil)
}

func someFunc(w http.ResponseWriter, req *http.Request) {
    w.Header().Set("Access-Control-Allow-Origin", "https://localhost:8081")
    w.Header().Set("Access-Control-Allow-Credentials", "true")    // c.Valueのように、Cookieの中身にアクセスするため必要

    c, _ := req.Cookie("session")
    s, ok := dbSessions[c.Value]
    if !ok {
        ...
        return
    }

    var u user
    u, ok = dbUsers[s.un]
    if !ok {
        ...
        return
    }
    bs, _ := json.Marshal(u)    // JSON形式に整形する
    fmt.Fprint(w, string(bs))    // byte配列をstringにキャストして、クライアントへresponse
}

...


ポイントは、クライアントへresponseする前に、JSON形式に整形することです。

Javascript(Vue)

  const serverPass = "https://localhost:10443/"
    ...

  getInfo() {
        axios.get(this.serverPass + 'images'
        ,{withCredentials: true}    // サーバーサイドでCookieの中身にアクセスするため必要
      )
      .then(respose => {
        console.log(respose.status);
        if (respose.data) {
          const data = respose.data
          console.log(data.UserName)    // JSON形式に整形したため、フィールドへアクセスできる
        }
      }).catch(err => {
        this.$router.push("/")
      })
    },

サーバーサイドからのresponse.dataを、JSON形式に整形しているため、
「.」により、フィールドにアクセスできます。

これは、サーバーから渡す値の型がstructでなく、map型である場合も同様です。

type user struct {
    UserName, First, Last, Role string
    Password                    []byte
    Pics                        []map[string]interface{}    // 例えば、この中からmap[string]interface{}を抽出してクライアントへ渡す際
}


もっとも、[]map[string]interface{}ではなく、下記のようにすべきかもしれません。

type pic struct {
    ID  int    `json:"id"`    //末尾で、JSON形式に整形した時のフィールド名を定義
    Src string `json:"src"`
}

type user struct {
    UserName, First, Last, Role string
    Password                    []byte
    Pics                        []pic
}


注意点として、JSON形式に整形する対象の型が構造体(struct)の場合、各フィールドの頭文字は大文字でなければなりません。
上記例のように、JSON形式に整形した時のフィールド名を小文字で定義しておいたほうが、クライアントサイドで取り扱いやすいでしょう。(この作業を行わないと、クライアントサイドでも「ID」などと指定しなければなりません。)

Cross-Originを許容する【Go】 - 技術向上

json【Go】 - 技術向上