Vue：Axios異步通信,生命周期

什么是Axios

Axios 是一個開源的可以用在瀏覽器端和 NodeJS 的異步通信框架，她的主要作用就是實現 AJAX 異步通信，其功能特點如下：

從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API [JS中鏈式編程]
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防御 XSRF（跨站請求偽造）

為什么要使用 Axios

由於 Vue.js 是一個視圖層框架並且作者（尤雨溪）嚴格准守 SoC （關注度分離原則），所以 Vue.js 並不包含 AJAX 的通信功能，為了解決通信問題，作者單獨開發了一個名為 vue-resource 的插件，不過在進入 2.0 版本以后停止了對該插件的維護並推薦了 Axios 框架。少用jQuery，因為它操作Dom太頻繁！

第一個 Axios 應用程序

咱們開發的接口大部分都是采用 JSON 格式，可以先在項目里模擬一段 JSON 數據，數據內容如下：創建一個名為 data.json 的文件並填入上面的內容，放在項目的根目錄下

{
  "name": "狂神說Java", "url": "https://blog.kuangstudy.com", "page": 1, "isNonProfit": true, "address": { "street": "含光門", "city": "陝西西安", "country": "中國" }, "links": [ { "name": "bilibili", "url": "https://space.bilibili.com/95256449" }, { "name": "狂伸說java", "url": "https://blog.kuangstudy.com" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }

測試代碼

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>狂神說Java</title> <!--v-cloak 解決閃爍問題--> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="vue" v-cloak> <div>名稱：{{info.name}}</div> <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div> <div>鏈接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div> </div> <!--引入 JS 文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data() { return { info: { name: null, address: { country: null, city: null, street: null }, url: null } } }, mounted() { //鈎子函數 axios .get('data.json') .then(response => (this.info = response.data)); } }); </script> </body> </html>

說明:

在這里使用了 v-bind 將 a:href 的屬性值與 Vue 實例中的數據進行綁定
使用 axios 框架的 get 方法請求 AJAX 並自動將數據封裝進了 Vue 實例的數據對象中
我們在data中的數據結構必須要和Ajax響應回來的數據格式匹配！

Vue的生命周期

官方文檔：https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載 DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。

在 Vue 的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊 JS 方法，可以讓我們用自己注冊的 JS 方法控制整個大局，在這些事件響應方法中的 this 直接指向的是 Vue 的實例。