【Vue自學筆記（三）】網路請求的簡單使用
阿新 • • 發佈：2020-12-24
如果想要呼叫介面，需要使用到一個axios，axios必須先匯入才可以使用。使用get或post方法即可傳送對應的請求，then方法中的回撥函式會在請求成功或失敗時觸發，通過回撥函式的形參可以獲取響應內容或錯誤資訊。
本章節只簡述簡單的使用，詳細請見文件：https://github.com/axios/axios
準備工作
- axios庫
<!-- 官網提供的axios線上地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- 介面
介面1:隨機笑話
請求地址:https://autumnfish.cn/api/joke/list
請求方法:get
請求引數:num(笑話條數，數字)
響應內容:隨機笑話
介面2:使用者註冊
請求地址:https://autumnfish.cn/api/user/reg
請求方法:post
請求引數:username(使用者名稱，字串)
響應內容:註冊成功或失敗
完整程式碼
<body> <!-- 官網提供的axios庫線上地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <input type="button" value="get請求" class="get"> <input type="button" value="post請求" class="post"> </body> <script> document.querySelector(".get").onclick = function () { axios.get("https://autumnfish.cn/api/joke/list?num=3") .then(function (responce) { console.log(responce) }, function (err) { console.log(err) }) } document.querySelector(".post").onclick = function () { axios.post("https://autumnfish.cn/api/user/reg", { username: "天龍教主夫人" }) .then(function (responce) { console.log(responce) }, function (err) { console.log(err) }) } </script>
講解
querySelector()方法返回文件中匹配指定 CSS 選擇器的一個元素。
注意： querySelector()方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用 querySelectorAll()方法替代。
get方法對應get請求。引數使用字串的形式拼接在後面。post方法對應post請求。引數以物件的形式作為引數提供給方法，和url用逗號隔開。
axios與vue結合
axios回撥函式中的this已經改變無法訪問到data中資料，需要把this儲存起來，回撥函式中直接使用儲存的this即可。
<body> <div id="app"> <input type="button" value="獲取笑話" @click="getJoke"> <P>{{joke}}</P> </div> </body> <script> var app = new Vue({ el: "#app", data: { joke: "很好笑的笑話" }, methods: { getJoke: function () { var _this = this axios.get("https://autumnfish.cn/api/joke") .then(function (responce) { _this.joke = responce.data console.log(responce) }, function (err) { console.log(err) }) } } }) </script>
很簡單，效果就是顯示一則笑話。