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);
  })
  .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('', {
  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);
  });