Zi 字媒體

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 Tags: axiosjavascript 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: