當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Axios实现异步通信

發布時間：2023/12/3 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Axios实现异步通信小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Axios異步通信(通信框架)

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

Axios是一個開源的可以用在瀏覽器端和NodeJS 的異步通信框架，她的主要作用就是實現AJAX異步通信，其功能特點如下:
●從瀏覽器中創建XMLHttpRequests
●從node.js創建http請求
●支持Promise API [JS中鏈式編程]
●攔截請求和響應
●轉換請求數據和響應數據
●取消請求
●自動轉換JSON數據
●客戶端支持防御XSRF (跨站請求偽造)
GitHub: https://github.com/ axios/axios
中文文檔: http://www.axios-js.com/

為什么要使用Axios

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

Vue的生命周期

官方文檔: https://cn.vuejs.org/v2/guide/instance.html#生命周期圖示
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載DOM、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們在事件觸發時注冊JS方法,可以讓我們用自己注冊的JS方法控制整個大局，在這些事件響應方法中的this直接指向的是Vue的實例。

代碼初探axios
先建立一個data.json

{"name": "cqh","age": "18","sex": "男","url":"https://www.baidu.com","address": {"street": "緹香郡","city": "寧波","country": "中國"},"links": [{"name": "bilibili","url": "https://www.bilibili.com"},{"name": "baidu","url": "https://www.baidu.com"},{"name": "cqh video","url": "https://www.4399.com"}] }

demo07.html

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ouK2QtJx-1609856717883)(C:\Users\王東梁\AppData\Roaming\Typora\typora-user-images\image-20210105210825401.png)]

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script></head> <body> <div id="app"><div>{{info.name}}</div><a v-bind:href="info.url">點我到百度鏈接</a> </div> <script>let vm = new Vue({el: "#app",//和data: 不同屬性：vmdata() {return {info: {name:null,url:null,},}},mounted() {//鉤子函數鏈式編程 ES6新特性axios.get("../data.json").then(response => (this.info=response.data));}}); </script> </body> </html>

總結

以上是生活随笔為你收集整理的Axios实现异步通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

通信
axios