# 【JS30】Day6 - AJAX Type Ahead
###### tags: `fetch`、`promise`、`同步與非同步`、`正規表達式`
本篇是**接資料**的重點，有3種常見方式。
1. 原生( XMLHttpRequest)
2. ajax
3. fetch

我是先學XMLHttpRequest的用法，但程式碼相對比較複雜、不直觀。後來才學習ajax、fetch的用法。本篇只講述[fetch的用法](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch)。
在學習前，最好先理解**同步與非同步**的觀念，才知道為什麼會有這項技術。

（推薦閱讀：[AJAX與Fetch API](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/ajax_fetch.html)）

## fetch
首先，先定義接口。還有定義一個空陣列，因為之後要把接到的資料推上去這個陣列。

可以想成是：接上資料的接口（找到門口、敲門）　→　得到一個反應（有人應門）。

使用 ```fecth``` 的時候它會先回傳 ```Promise```給我們，第一個回傳的是一個 ```readableStream```，我們需要先把它解析成 ```json ```來讀取。

//定義接口跟空陣列
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const cities = [];

//開始接資料囉
fetch(endpoint)
.then(blob => blob.json()) //ES6箭頭函式，接到資料後，轉json
.then(data =>console.log(data)) //console後發現data是陣列
.then(data => cities.push(...data)); //data推上cities這個空陣列

要注意的是上方程式碼範例中，要是不加```... (ES6的spread)```，只寫成：

.then(data => cities.push(data));

推上陣列的資料就會是data陣列本身，而不是陣列內的項目。
<br>
### debug時間
等等，json資料格式不是物件嗎？
為何```.then(data =>console.log(data))```後，會發現data是陣列呢？
**fetch後會回傳一個promise**。（要懂這段，必須要了解什麼是promise。）
then方法實際上是整個Promise結構的流程運作起來的主要關鍵，then方法之後，剛好傳的data格式是陣列。

OK，開始有點不懂了。
什麼是promise？
## promise
要了解promise，要先知道這個技術為何而生，所以就得了解**同步、非同步**的概念，以及**callback**，然後就會了解到**callback hell**。
這部分我會另外打一份技術筆記。（請看：[同步與非同步、promise、callback的概念](https://hackmd.io/HlQ3Ka0pR7CuT1yrdkm2RQ)）

<br>

## 正規表達式
下方程式碼中，```const regex = new RegExp(wordToMatch, 'gi');```是使用**建構式**去呼叫**正規表達式**。
[正規表達式](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)（下方的RegExp）是個看起來很混亂的寫法，是被用來匹配字串中字元組合的模式。

g 表示 global search，也就是會去找整份文件，而不是找到就停。
i 表示 case insensitive，也就是不去區分大小寫。

function findMatches(wordToMatch, cities) {
  return cities.filter(place => {
    // here we need to figure out if the city or state matches what was searched
    const regex = new RegExp(wordToMatch, 'gi');
    return place.city.match(regex) || place.state.match(regex)
  });
}

<br>

## innerHTML
接下來把過濾好的內容，放到html中。
**replace的用法，用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。** 語法：```stringObject.replace( regexp/substr , replacement ) ```

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

function displayMatches() {
  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = html;

//定義好DOM
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');

//監聽DOM，執行函式
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);
}

<br>

## keyup、change、input事件
keyup： 鬆開鍵盤時觸發。
change： 焦點離開元素之前，如果元素有改變的話，就會觸發。
input：會在任何元素值改變的時候被出發（例如每打一個字都會觸發一次）