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页面自动宣传一般我们用于页面初始化,自动请求后台数据所谓的方法指的是这个方法,不需要自己写他继承会自动的调用

相关推荐
FRing032 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
Penge6664 小时前
《Go 后端开发者学 TypeScript:typescript 类型断言》
javascript
Penge6664 小时前
《Go 后端开发者学 TypeScript:Symbol》
javascript
疯华整猫5 小时前
被杀掉之后:我把 Android 的「唤起 + 常驻」重做了一遍
前端·面试·架构
三*一6 小时前
Mapbox‑GL JS 多边形折点编辑工具:实现原理、功能拆解与踩坑总结
开发语言·javascript·ecmascript
IT_陈寒7 小时前
Java开发实战:从入门到精通
前端·人工智能·后端
FungLeo7 小时前
成为全栈·基础补充·Node.js 运行时:事件循环与异步
javascript·node.js·事件循环·后端开发·异步编程·成为全栈
风骏时光牛马7 小时前
生成一个AI转岗经历标题,只需要一个标题,不需要其他的任何文本。
前端
Penge6667 小时前
《Go 后端开发者学 TypeScript:类型别名》
javascript
Penge66615 小时前
《Go 后端开发者学 TypeScript:数组和元组》
javascript