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

相关推荐
程序员黑豆5 小时前
Java类型推断完全指南:从var到菱形运算符,掌握使用限制与最佳实践
java·前端·ai编程
To_OC5 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript
GreenTea5 小时前
深度解读 Anthropic 多智能体报告:更强的模型 ≠ 更好的协调
前端·后端·算法
浮生望6 小时前
前端API工程化:用 Mock 数据与 Axios 配置实现独立于后端的并行开发
前端
万少6 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波0076 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
Brown.alexis7 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝8 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
计算机魔术师8 小时前
新兴多智能体系统的模式与问题
前端
用户059540174469 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css