Getting Started with Axios

version：0.18

Axios 是一個以 Promise based，用於瀏覽器及 node.js 的 HTTP Client.

現今前端技術中，Axios 算是比較完整可以方便開發者使用 AJAX 的套件，Vue 的作者也建議可以使用此套件（參考來源）。

Installation

Using npm

npm install axios

Using CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Usage

引用範例

// 可以使用 TypeScript definitions
import axios from 'axios';
// 或者直接 require
const axios = require('axios');

基本使用

// GET
axios.get('https://api.github.com/users/johnson4932?id=123')
.then(function (response) {
  // Success
  console.log(response.status);
  console.log(response.data);
})
.catch(function (error) {
  // Error
  console.log(error);

  // Error 的詳細資訊
  console.log(error.response);  
})
.then(function () {
  console.log('always executed');
});

// 代入參數（ get 代入參數時需要加上 params 的 key）
axios.get('https://api.github.com/users/johnson4932', {
    params: {id: 123}
})
.then(function (response) {
  // Success
  console.log(response.status);
  console.log(response.data);
})
.catch(function (error) {
  // Error
  console.log(error);
})
.then(function () {
  console.log('always executed');
});

// 使用 POST（post 可以直接傳入參數，不需再過 params）
axios.post('https://api.github.com/users/johnson4932', {
  id: 123
})
.then(function (response) {
  // Success
});

Axios API
除了直接使用 Axios request method 之外，可以透過 Axios API 以 config 的方式建立 request。

範例

axios({
  method: 'get',
  url: 'https://api.github.com/users/johnson4932',
  data: {
    id: 123
  }
})
.then(function (response) {
  console.log(response.status);
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
})
.then(function () {
  console.log('always executed');
});

Request method aliases
除了範例提到的方法，可以參考以下相對應的 method aliases 做使用。

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

處理多個非同步請求

除了基本的取資料應用之外，比較進階的用法是要一次打多個 API 拿資料，而且是需要等這些資料都齊全以後才能繼續處理。

操作方式很簡單，透過 axios.all() 放入所有 request，再透過 axios.spread() 取得各 request 拿回來的資料。

範例

axios.all([
  axios.get('https://api.github.com/users/johnson4932'),
  axios.get('https://api.github.com/users/mag5323')
])
.then(axios.spread(function (johnson4932, mag5323) {
  console.log(johnson4932.data);
  console.log(mag5323.data);
}));

Instance

以往操作 AJAX 最麻煩的地方，就是在大量戳類似的 API 時，在每個 request 都要重新定義一些重複的設定。

在 Axios 中可以透過先建立一個擁有基本設定的 Request Instance，之後只要再根據 URL 不同再做調整就好。

範例

const instance = axios.create({
  baseURL: 'https://api.github.com/users/',
  timeout: 1000
});

instance.get('johnson4932')
.then(function (response) {
  console.log(response.data);
});

Upload file

如果想要直接透過 Axios 上傳檔案，記得更改 Content-Type 為 multipart/form-data。

範例

let formData = new FormData();
// 透過 FormData Obj 代入 <input type="file"> 的檔案資料
formData.append('file', document.getElementById('file').files[0]);

axios.post('/api/file/import', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

Download file

除了上傳檔案之外，也可以透過 Axios 實作下載檔案的功能。

Axios 透過 AJAX 下載的功能，是模擬點擊下載連結時的操作。

範例

axios.post('/download-url', {}, {
  // 將 responseType 設成 blob
  responseType: 'blob',
})
.then((res) => {
  // 建立一個 ObjectURL
  let url = window.URL.createObjectURL(new Blob([res.data]));
  // 建立一個 <a> 的 element instance，並指定 ObjectURL
  let link = document.createElement('a');
  link.href = url;

  // 從 Header 取得檔案名稱
  let headerLine = res.headers['content-disposition'];
  let startFileNameIndex = headerLine.indexOf('"') + 1
  let endFileNameIndex = headerLine.lastIndexOf('"');
  let filename = headerLine.substring(startFileNameIndex, endFileNameIndex);

  // 設定檔名
  link.setAttribute('download', filename);

  // 將連結加到 body 中並點擊
  document.body.appendChild(link);
  link.click();

  // 刪除 element instance
  link.remove();
});