說到遠端取資料腦中馬上出現的就是前一陣子剛學的 XMLHttpRequest 或 Fetch,原來 axios 也是其中一種方式。
Axios
如何使用
開始使用有兩種方法:
- 安裝模組
npm install axios
- CDN引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios CDN網址
引入後就可以直接使用了!
優點
- 使用方法類似於jQuery
- 可以搭配 async/await
- 可以使用Promise
- 可以在node.js中使用
- 可以取消要求
- 可以自動轉換JSON資料
- 可以用 axios.create 方法做API domain的管理
缺點
需要使用catch做錯誤的捕捉與處理
Vue.createApp({
data(){
return{
data: []
}
},
methods: {
},
mounted: function(){
axios.get('https://randomuser.me/api/?results=100')//發出請求
.then(response => {
const result = response.data.results;
this.data = result //放入data中
})
.catch( error => {
console.log(error);
})
.finally(()=>{
console.log(完成')
})
}
}).mount('#app')
XMLHttpRequest
為JavaScript的原生寫法。
優點
JavaScript的原生物件,不需引入任何函式庫
缺點
難以捕捉各階段的狀態
寫法冗長不直覺,每次使用就要new一個XMLHttpRequest物件
Fetch API
加入ES6 promise物件,於response後以then()來處理,非常直觀、不須引入函式庫!
優點
- 使用ES6的Promise物件做回傳的處理
- 可以搭配 async/await
- 不須引入函式庫
- 可以直接呼叫定義的Request物件
- 可以用Headers物件設定表頭
缺點
- 需要使用catch做錯誤的捕捉與處理
- 伺服器有回應的情況下,都會回傳已實現的Promise物件,須自行判斷伺服器的回傳代碼(200、500、404等)
- 回傳的ReadableStream物件,對應不同資料類型(json、blob、formdata)需要使用不同的對應方法。
- IE不支援 (使用Fetch polyfill)