search
尋找貓咪~QQ 地點 桃園市桃園區 Taoyuan , Taoyuan

Getting Started with Axios – 佛祖球球

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

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 代入  的檔案資料
formData.append('file', document.getElementById('file').files[0]);

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



熱門推薦

本文由 blogjohnsonluorg 提供 原文連結

寵物協尋 相信 終究能找到回家的路
寫了7763篇文章,獲得2次喜歡
留言回覆
回覆
精彩推薦