###### tags: `JS 學徒特訓班`

# JS 學徒特訓班 36 ES6 起步走 - Fetch 練習筆記

- 題目：[ES6 起步走 - Template String 樣板字串](https://hackmd.io/zGtDzkIsT8ilQ78yV_3GDw)
- 參考文章：
- [ES6 Fetch 遠端資料方法](https://ithelp.ithome.com.tw/articles/10194388)
- [JavaScript Fetch API 使用教學](https://www.oxxostudio.tw/articles/201908/js-fetch.html)

## fetch 的使用方法

fetch('網址')
.then(function(response) {
    // 處理 response
}).catch(function(err) {
    // 錯誤處理
});

fetch 的使用方法，看起來跟 axios 很像，但不一樣的是，在 fetch 取得檔案之後，要透過 `json()` 的方法處理檔案，接著傳遞到下一層。

以 30 關的題目為例

let url = 'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json';

fetch(url)
  .then(response => {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);//在這裡才能在 console 看到整個資料
  });

其他的部分，撰寫的方式都一樣，沒想到原生語法也很好懂。

[練習的CodePen](https://codepen.io/irisLife/pen/GRoLwye)