Day 5 HttpClient 使用了 HttpClient，這篇會額外示範如何加入 querystring。 這次想做個 List 加無限卷軸的練習。

準備 API

這次想要用無限卷軸，所以我特別去準備了一個資料比較多的。臺北市資料大平台 - 臺北市臺北旅遊網美食消費店家
這個資源，他不能直接叫用，他要先下載一個 .gz 然後用 7-zip 解壓，解完之後是個 1G 的 json 。

跟 Day 5 HttpClient 一樣使用 ASP.NET Web API。
下面 API 主要做了兩件事情:

1. 讀取 json 然後轉成 Object
2. 用 Skip 跟 Take 去分頁 (第幾頁，一次幾筆)

        [HttpGet]
        [Route("GetFoodList")]
        public IHttpActionResult GetFoodList(int page = 1, int pageSize = 10)
        {
            if(page < 1)
            {
                page = 1;
            }

            var filepath = @"D:\shops_zh-tw";
            using (var strreader = new StreamReader(filepath))
            {
                using (JsonReader reader = new JsonTextReader(strreader))
                {
                    JsonSerializer serializer = new JsonSerializer();

                    ShopsData result = serializer.Deserialize<ShopsData>(reader);

                    return Ok(result.data.Skip((page - 1) * pageSize).Take(pageSize));
                }
            }
        }

以下是他的 Model 類別。

    public class ShopsData
    {
        public string type { get; set; }
        public int total { get; set; }
        public DateTime? update { get; set; }
        public List<Shop> data { get; set; }
    }

    public class Shop
    {
        public int id { get; set; }
        public string language { get; set; }
        public string name { get; set; }
        public string intro { get; set; }
        public string open_time { get; set; }
        public string zipcode { get; set; }
        public string county { get; set; }
        public string distric { get; set; }
        public string address { get; set; }
        public string[] tel { get; set; }
        public string[] fax { get; set; }
        public string[] email { get; set; }
        public string latitude { get; set; }
        public string longitude { get; set; }
        public string min_rate { get; set; }
        public string max_rate { get; set; }
        public string charge { get; set; }
        public string remind { get; set; }
        public string official_site { get; set; }
        public string facebook { get; set; }
        public string google_plus { get; set; }
        public string update { get; set; }
        public string film { get; set; }
        public string audio { get; set; }
        public string[] categories { get; set; }
        public object[] gourmet { get; set; }
        public string[] consume { get; set; }
        public string[] services { get; set; }
        public object[] accessibility { get; set; }
        public string[] images { get; set; }
    }

接著嘗試打打看 Postman 測試 API

列表顯示

這邊主要是 HttpClient.get() 方法，他有 opions 參數，其中 params 就可以放置我的 querystring 的值

options: {
    headers?: HttpHeaders | {[header: string]: string | string[]},
    observe?: 'body' | 'events' | 'response',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType?: 'arraybuffer'|'blob'|'json'|'text',
    withCredentials?: boolean,
  }

列表顯示，主要就是調用到 ion-list 、ion-item、ion-img 元件。

加上無限捲軸

在 eat.page.html 中，在 ion-content 中加入 ion-infinite-scroll 元件。
threshold 屬性，從底部的距離 25% 觸發 ionInfinite 事件，預設都是 15%，也可以用 px 。
ionInfinite 為觸發事件。
ion-infinite-scroll-content 元件，loadingText 為載入的顯示文字，loadingSpinner 為動畫較果，動畫較果的參數有: bubbles、circles、circular、crescent、dots、lines、lines-small。

在 eat.page.ts 中

第 1 部分
第 29 行，本來是直接指派，要改用 concat 去串加資料。
第 32 行，下面 event.target.complete(); 則是告訴無限卷軸已經完成了。 那他的動畫就會停下來了。

第 2 部分
loadMore(event) 則是 page 加一，然後叫用 API 取得資料。
最後如果 page 等於最後一頁的話就停用無限卷軸。

最後的結果 (圖中，我自己有在 API 那邊 Sleep 個 1 秒，不然會看不出動畫)