070_Vue:Axios异步通信
2021/11/20 6:11:28
本文主要是介绍070_Vue:Axios异步通信,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- 什么是Axios
- 为什么要使用 Axios
- 第一个 Axios 应用程序
- Vue的生命周期
什么是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": "haoran", "url": "https://blog.csdn.net/adsdaas", "page": 1, "isNonProfit": true, "address": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https://space.bilibili.com/95256449" }, { "name": "haoran", "url": "https://blog.csdn.net/adsdaas" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <div>{{info.name}}</div> <div>{{info.address.street}}</div> <a v-bind:href="info.url">点我</a> </div> <!--1.导入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm = new Vue({ el: "#vue", data(){ return { // 请求的返回参数格式必须和json字符串一致 info: { name: null, url: null, address: { street: null, city: null, county: 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的生命周期
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。
在 Vue 的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册 JS 方法,可以让我们用自己注册的 JS 方法控制整个大局,在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
这篇关于070_Vue:Axios异步通信的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用