Vue 3 使用 axios 套件取得遠端資料

說到遠端取資料腦中馬上出現的就是前一陣子剛學的 XMLHttpRequest 或 Fetch，原來 axios 也是其中一種方式。

Axios

如何使用

開始使用有兩種方法:

1. 安裝模組 npm install axios
2. CDN引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   Axios CDN網址

引入後就可以直接使用了!

優點

1. 使用方法類似於jQuery
2. 可以搭配 async/await
3. 可以使用Promise
4. 可以在node.js中使用
5. 可以取消要求
6. 可以自動轉換JSON資料
7. 可以用 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()來處理，非常直觀、不須引入函式庫!

優點

1. 使用ES6的Promise物件做回傳的處理
2. 可以搭配 async/await
3. 不須引入函式庫
4. 可以直接呼叫定義的Request物件
5. 可以用Headers物件設定表頭

缺點

1. 需要使用catch做錯誤的捕捉與處理
2. 伺服器有回應的情況下，都會回傳已實現的Promise物件，須自行判斷伺服器的回傳代碼(200、500、404等)
3. 回傳的ReadableStream物件，對應不同資料類型(json、blob、formdata)需要使用不同的對應方法。
4. IE不支援 (使用Fetch polyfill)