Day19 純、手工系列 JS(Vue Axios篇)

2018 iT 邦幫忙鐵人賽

DAY 19

Modern Web

Go！從無到打造最佳行動網站系列第 19 篇

2018鐵人賽 vuejs axios ajax api

掰掰工程師

團隊露天廢物

2017-12-29 09:37:19

22652 瀏覽

今天換講講Vue好了寫了19天的後端跟理論，換點口味吧！
今天要來研究的是 Axios
在最早一開始的時候，Vue官方推薦的ajax套件並不是，一直到了去年年底的時候，Vue才將Axios加入到推薦項目中，取代vue-resource，當然如果你用習慣vue-resource也是可以使用的。

axios Github

Promise based HTTP client for the browser and node.js

在github中他有幾項特色

可以從流覽器發送XMLHttpRequests ( 簡單來說可以發送ajax )
可以從Nodejs發送 Http 請求
支援ES6 Promise
可以攔截請求跟回應
改變或轉換請求與回應的資料(這跟上面有相互呼應的感覺)
取消(多個?!)請求(Requests)
自動轉換成Json格式
可以預防XSRF攻擊

我們今天應該沒有要來講在伺服器端的研究，我們就以最簡單的方式來引入

首先我們先在html引入

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

為了做範例我們新寫一個頁面，裡面做的事情很簡單，按下按鈕以後要發送Request到我們之前用golang寫的api去取得資料
我將這次的範例放在
index.html

<!DOCTYPE html>
<html>
<head>
  <title>Axios Demo</title>
</head>
<body>
  <div id="app">
    <p v-for="teacher in teachers">{{ teacher.TeacherName }}</p>
    <button @click="getAllTeacher">取得</button>
  </div>
  <script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

"use strict";

const vm = new Vue({
  el : '#app',
  data : {
    teachers : []
  },
  methods : {
    getAllTeacher : function() {
      let self = this;
      axios({
        methods: 'get',
        url: 'http://localhost:8080/ironSchool/teacher'
      })
      .then((resp) => {
        self.teachers = resp.data;
      });
    }
  }
});

好吧開始遇到到麻煩了！
於是你打開你的F12，看到了Console的地方會這樣出現，怎麼都紅紅的，可是也是看不懂他在講啥
F12_console