.then() function 透過 callback function 從 Promise 拿結果

用法： Promise.then(函式)

function printResult(a) {
    console.log(a);
}
const request = fetch("https://run.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d")

request.then(printResult)

關於 .then 的用法可參考：Promise.prototype.then()-MDN web Docs

要印出 response 的 body 的話，可以這樣寫：

const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
    const api200 = 'https://run.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
    const request = fetch(api200)
    request.then(response => {
        console.log(response.body)
        }
    )

會印出一個 ReadableStream Object。

所以需要 .text() or .json() function 來解讀

const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
    const api200 = 'https://run.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
    const request = fetch(api200)
    request.then(response => {
                    console.log(response.body)
        }
    )

如果用 .json() 的話，會直接回傳 JS 的物件型態。

.json() 相當於 .text() 處理後再經過 JSON.parse：

fetch('url').then(res => { 
    res.text().then( text => {
        return JSON.parse(text)
    })

})

但是這樣印出的結果會是回傳一個 Promise 物件

所以要再將 response.text() 這個回傳值，再用 .then(cb) 函式得到回傳值，就會是 response body 了！

const api500 = 'https://run.mocky.io/v3/74e65703-c9b2-4c4c-b36e-88d8cc6cd253'
    const api200 = 'https://run.mocky.io/v3/d2381372-4e30-4ec6-8a03-c3573417112d'
    const request = fetch(api200)
    request.then(response => {
                    const result = response.text()
                    result.then(body => { console.log(body) })
                    }
                )

複習

流程：

1. fetch('url') 拿到回傳值 Promise 。
2. 解讀 Promise 物件需使用 .then() function，這是 Promise 的特性。
3. 針對 fetch('url').then(res => console.log(res.body))回傳會是一個 ReadableStream 實例。
4. 若要讀取 ReadableStream 實例需要用 .text() or .json() 來解讀。
5. 變成 fetch('url').then(res => console.log(res.text())) 將會再回傳 Promise 物件，所以要用 .then 來解讀。
6. 結果：

fetch('url').then(res => {
  res.text().then(result => {
      console.log(result)
  })
})

就可以拿到透過 fetch

回傳值複習：

fetch() => Promise Object
response.text() => Promise Object
response.body => ReadableStream Object
response.json().then() => Promise Object

參考資料：鐵人賽：ES6 原生 Fetch 遠端資料方法