在前端開發中，我們經常需要從后端（服務器）獲取數據。在過去，我們使用的是 XMLHttpRequest 進行數據請求。然而，現在我們有了更好的選擇——fetch 和 axios。

fetch 和 axios 都是基于 Promise 的 HTTP 請求庫。它們旨在幫助我們更輕松地向服務器發送請求并處理響應。

然而，在 Vue 中，我們往往使用 axios。axios 可以被視為基于 Promise 的 XMLHttpRequest，它允許我們以簡潔的方式發送 GET、POST、PUT 等請求，并處理響應。

import axios from 'axios'
export default {
data () {
return {
users: []
}
},
created () {
axios.get('https://api.github.com/users')
.then(response =>{
this.users = response.data
})
.catch(error =>{
console.log(error)
})
}
}

如上所示，我們可以使用 axios 發送 GET 請求。axios.get() 返回的是一個 Promise，我們可以使用 .then() 處理請求成功后的響應，使用 .catch() 處理請求失敗后的響應。

但是，如果我們想使用 fetch 呢？

export default {
data () {
return {
users: []
}
},
created () {
fetch('https://api.github.com/users')
.then(response =>response.json())
.then(data =>{
this.users = data
})
.catch(error =>{
console.log(error)
})
}
}

如上所示，我們可以使用 fetch 發送 GET 請求。但需要注意的是，fetch 返回的是一個 Promise，但是它并沒有一個捕獲錯誤的方法。因此，我們必須使用 .catch() 來處理請求失敗的響應。

此外，fetch 的一個優點是支持緩存和流。我們可以使用 cache 屬性來設置是否啟用緩存；使用 body 屬性來設置請求 payload；使用 headers 屬性來設置請求頭；使用 mode 屬性來設置請求的模式；使用 redirect 屬性來設置請求重定向。

export default {
data () {
return {
users: []
}
},
created () {
fetch('https://api.github.com/users', {
method: 'GET',
cache: 'default',
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow'
})
.then(response =>response.json())
.then(data =>{
this.users = data
})
.catch(error =>{
console.log(error)
})
}
}

如上所示，我們可以使用 fetch 發送 GET 請求，并設置請求的相關屬性。

總之，fetch 和 axios 都是很好的 HTTP 請求庫，并且它們都有自己的優點和缺點。一般來說，在 Vue 中，我們更傾向于使用 axios。