Ajax,vue生命周期(自动加载页面发出请求)Axios

Ajax: 全称Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:

  • 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。

  • 异步交互:可以在不重新加载整个页面 的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。

xml 一种标记语言用来存储复杂的数据语言

同步异步

Axios

使用原生的Ajax请求的代码编写起来还是比较繁琐的,所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装,简化书写。Axios官网是:https://www.axios-http.cn

入门程序

Axios的使用比较简单,主要分为2步:

1). 引入Axios文件(如果网络不通畅,可以使用离线的已经下载好的js文件,资料中已经提供)

请求方法别名

为了方便Axios还针对不同的请求,提供了别名方式的api,具体格式如下:

axios.请求方式(url [, data [, config]])

Ajax是一种异步交互可以在HTML页面中发布一个一步请求与服务器进行数据交换

然后使用Axios是对原生的AJAX进行封装,更加简单的发送Ajax请求的技术Axios 简化书写

在vue使用

async 声明一个一部方法 await等待 使用这两个可以把异步变为同步,因为在大型的项目当中,这样可以使代码具有可读性,增强维护性

vue的生命周期

vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示:

其中我们需要重点关注的是mounted,其他的我们了解即可。

mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

在vue当中有八个生命周期的阶段也就会有对应的八个生命周期的钩子方法,所谓的钩子方法指的是这个方法,不用自己用VUE,他底层会自动调用

如果要做到在页面加载完毕,自动发出请求请求服务端呢,这时候我们需要了解VUE的生命周期他分为八个阶段,每处发一个生命周期的时间会制同执行一个生命周期的方法这些生命周期的方法也称为钩子方法其中呢要重点关注**mounted()**这个方法挂在完成后为优异初始化成功HTML页面自动宣传一般我们用于页面初始化,自动请求后台数据所谓的方法指的是这个方法,不需要自己写他继承会自动的调用

相关推荐
一点晖光2 小时前
ios底部按钮被挡住
前端·ios·微信小程序
cz追天之路8 小时前
华为机考--- 字符串最后一个单词的长度
javascript·css·华为·less
Light608 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟8 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
ModyQyW9 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app
bitbitDown9 小时前
我的2025年终总结
前端
五颜六色的黑10 小时前
vue3+elementPlus实现循环列表内容超出时展开收起功能
前端·javascript·vue.js
wscats10 小时前
Markdown 编辑器技术调研
前端·人工智能·markdown
EnoYao11 小时前
Markdown 编辑器技术调研
前端·javascript·人工智能