Axios basic

axios 基本語法

簡介

axios 是一種 HTTP 的請求工具，也是 Vue 的作者尤雨溪推薦使用，比起 ajax 更為輕量，跟 fetch 一樣使用 promise 物件，卻不限至瀏覽器，只需要短短幾行程式碼即可，寫法更加直覺，以下為官方表明特點。

1. 從瀏覽器發出 XMLHttpRequests
2. 可以從 node.js 發出 http 請求
3. 支持 Promise API
4. 攔截請求和響應
5. 轉換請求和響應數據
6. 取消請求
7. JSON 數據的自動轉換
8. 客戶端支持防止 XSRF

安裝

介紹常見的安裝方式，其他請查閱文檔

使用 NPM

$ npm install axios

引入 CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios 基本用法

axios get 方法

沒有參數時 get 請求

axios
  .get("https://example.com") // 放入要發出get請求網址
  .then(function (response) {
    // 當請求成功時
    console.log(response);
  })
  .catch(function (error) {
    // 請求失敗時
    console.log(error);
  })
  .then(function () {
    // 總是執行
  });

有參數

axios
  .get("https://example.com", {
    params: {
      ID: 123,
    },
  }) // 幫你組合成https://example.com?ID=123
  .then(function (response) {
    // 當請求成功時
    console.log(response);
  })
  .catch(function (error) {
    // 請求失敗時
    console.log(error);
  })
  .then(function () {
    // 總是執行
  });

axios post 方法

使用 post 請求，傳送 name 和 eamil 資料

axios
  .post("/signup", {
    name: "Joe",
    email: "joe94113@gmail.com",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

回傳的資料

當然除了 get，post 之外還有其他 HTTP 請求可以使用，使用方式也是大同小異，就是路由以及 HTTP method 的改變而已。

axios.get("/user/12345").then(function (response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
});

使用六角註冊登入 API axios 範例程式碼

axios

https://github.com/axios/axios