這次的東西好陌生啊完全沒聽過ＱＱ
以前呼叫api 都用XMLHttpRequest或是jQuery
但是搜尋了一下發現axios套件好像很可以！
哈哈哈哈又要研究囉 下次用用看^^

使用者操作需求

使用者在輸入框內輸入關鍵字，即時過濾出符合的城市，並且列表的關鍵字上會有螢光筆樣式

技術重點

• 使用fetch()接收資料
• 使用promise.then()處理promise物件
• 正規表達式RegExp()
• 將陣列資料用join參數內定義的字串(或符號)，將其連接轉為一個字串join()

流程步驟

1. 預先知道api回傳為城市的JSON資料
2. 先建立一個空的陣列cities 用來存放資料
3. 用fetch取得API JSON資料，並push至cities陣列
4. 建立function findMatches() 用於比對輸入的關鍵字
5. 建立function displayMatches() 並設定監聽輸入框的change&keyup
6. 在displayMatches()裡呼叫findMatches()進行比對，並將回傳資料組合成HTML display在頁面上

範例語法備註

[ fetch() ]

回傳的事promise物件，所以要對promise進行操作
詳細請看
範例中有示範這行

const prom = fetch(endpoint);
console.log(prom);
// 回傳不是data 是promise， 所以要操作promise

[ promise.then() ]

對promise物件進行工作，可以接接接 像水管一樣

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

使用fetch()取得api資料後
用then()來操作回傳的promise資料
可以先用fetch(endpointen).then(blob=> console.log(blob))
印出Response會發現需要抓取裡面的JSON，在__photo__:Response/json
所以寫成.then(blob => blob.json())並且逐筆push至cities中
data前面的...就是逐筆的寫法

[ RegExp() ]

正規表達式.. 好複雜呀 大概查了一下
後面的參數g代表全部，i代表不分大小寫

[ arrayObj.join() ]

將陣列組合成一個字串，並且以join中的參數做為分隔
在這裡因為map()逐筆回傳的資料都是陣列形式並且中間以逗點區分
但為了要放入HTML中
所以將它轉為字串並且以空格作為每筆的區分

const html = matchArray.map(place => {
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');

處理百進位逗點function()

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}