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」などと指定しなければなりません。）