promise 經過.then()後，回傳值也會是 Promise (Chaining 特性)

promise .then之後會不斷的回傳自己，

像是 JQuery 中：

$('.btn').css(...).hide().show()

為什麼可以做到函式一直接下去，是因為 $('.btn').css(...) 會回傳一個 JQuery 物件，$('.btn').css(...).hide()也會回傳一個 JQuery 物件....一直連續下去，這形成一個 Chain。

所以我可以利用 .then() 的特性，來寫成這樣：

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 => {
    return response.json()
}).then( json => {
        console.log(json)
    })

結果：

補充 Promise chaining 特性

如果 .then() 的 return 值設成 Promise，例如：return reponse.json()，會直接回傳處理過的型態，變成 JavaScript object，如果是 response.text()，就會 return String 型態。

超級比一比

舊寫法：

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 => {
    response.json().then(result => {
        console.log(result)
    })
})

新寫法：

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 => {
    return response.json() 
    // response.json() 原本是 promise
    // 經過回傳後，會把裡面的值拿出來，變成 object 
}).then( json => {
        console.log(json)
    })

舊寫法相對層級比較多，縮排較多，新寫法層級只有兩個，較簡潔。