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


Posted by hoyi-23 on 2021-07-17

說到遠端取資料腦中馬上出現的就是前一陣子剛學的 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)

#Axios







Related Posts

CS50 Lec7 - SqLite SameTime Update Error - Transaction

CS50 Lec7 - SqLite SameTime Update Error - Transaction

同步 Sync 與非同步 Async

同步 Sync 與非同步 Async

Leetcode 刷題 pattern - Fast & Slow Pointer

Leetcode 刷題 pattern - Fast & Slow Pointer


Comments