iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0
Mobile Development

在 Flutter 開發旅程的手札系列 第 7

Flutter Package - 串接api(三)

  • 分享至 

  • xImage
  •  

這是最後一章的api文章,今天要來介紹api串接時要特別注意的地方,以及api的bug處理小技巧

--
串接的格式要注意,當如果看到API文件,是單字的開頭小寫,看起來像是駝峰(lower camel case)或蛇形命名法(snake case),在使用JsonSerializable上要特別注意

  • lowerCamelCase
@JsonSerializable()
  • snake_case
@JsonSerializable(fieldRename: FieldRename.snake)

如果真的很不幸遇到兩種都有混在一起用的,這時候建議選一個比較多的case,另一種則用JsonKey的name來換掉原本api打上來的值

@JsonKey(name:"api_name")
String newName

若api在串接時發現沒有成功,可以用下方的列表做一些常見的錯誤檢查,也可以多多善用DebugMode來做進一步的檢查

  1. 物件接錯層
  2. 請求寫錯了(GET/POST/PUT...)
  3. url的變數少括號,或是多包了兩層括號({變數}只有一個大括號)
  4. @path{變數}忘記加入
  5. 變數的型別加錯了,以及是選填還是必填
  6. 當最後做完後是不是有再重新執行Code Generation

最後來教大家如何用Android Studio,確認自己的api有GET/POST成功

  1. 首先先執行Code,要確認有畫面出來,再來開啟右側的 "Futter Performance",點擊右下角"Open DevTools"

https://ithelp.ithome.com.tw/upload/images/20220922/20152683CZdHLbFHWR.png

  1. 點擊Network就可以看到監聽的畫面,接下來只要去操作串接好api的介面,就會看到類似下方的圖片,Status要是200才是正確的,可以看一下旁邊的Request url是否正確
    https://ithelp.ithome.com.tw/upload/images/20220922/20152683iOM8igvk32.png

  2. 透過Request檢查傳出的資料
    https://ithelp.ithome.com.tw/upload/images/20220922/20152683U1yd0ddwNE.png

  3. 確認Response回傳的資料
    https://ithelp.ithome.com.tw/upload/images/20220922/20152683LdzBNXUqFU.png


以上是我三篇的api介紹文章,謝謝大家喜歡我的內容,如果有更多補充的API訊息、詢問,下方歡迎大家多多留言


上一篇
Flutter Package - 串接api(二)
下一篇
Flutter Models - 介紹Models
系列文
在 Flutter 開發旅程的手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言