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

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄4 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端