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

相关推荐
ayqy贾杰几秒前
Cursor SDK发布!开发者可直接搬走其内核
前端·vue.js·面试
changshuaihua0013 分钟前
扣子开发指南
javascript·人工智能
椰猫子9 分钟前
SpringMVC(SpringMVC简介、请求与响应(请求映射路径、请求参数、日期类型参数传递、响应json数据))
java·前端·数据库
love530love12 分钟前
如何在 Google Chrome 中强制开启 Gemini AI 侧边栏(完整图文教程)
前端·人工智能·chrome·windows
光影少年14 分钟前
对typescript开发框架的理解?
前端·javascript·typescript
跨境数据猎手17 分钟前
反向海淘代购系统:1688 / 淘宝自动代采 + API 同步(附可用源码)
前端
lUie INGA22 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
a11177625 分钟前
“像风之翼“无人机巡检平台仪表盘
前端·javascript·开源·html·无人机
李白的天不白29 分钟前
vue 数据格式问题
前端·vue.js·windows
a11177633 分钟前
QQ 宠物(怀旧 开源)前端electron项目
前端·开源·html