vue的学习之路(Axios 基本使用)

<script src="js/axios.min.js"></script>

3、在页面中引用

4、发送异步请求

  • url?xxx

  • rest请求【GET,POST,DELETE,PATCH

5、准备一个SpringBoot的控制层与axios进行交互

  • 实体类

public class User {

private Integer id;

private String username;

  • 控制层

/**

  • @author 王恒杰

  • @date 2021/12/16 16:25

  • @Description:

*/

@Controller

@CrossOrigin //设置当前控制器支持所有域访问 解决跨域问题

public class UserAction {

@RequestMapping(“test1”)

@ResponseBody

public String test1(Integer id,String username){

System.out.println(“test1”);

System.out.println(“id:”+id);

System.out.println(“username:”+username);

return “test1 response”+id+username;

}

}

6、 GET方式的请求

axios.get(“http://localhost:8080/aa/test1?id=1&username=whj”)

.then(function (response) {

console.log(response.data)

})

.catch(function (err) {

console.log(err)

})

7、POST方式请求

  • 前台传的数据是json

//发送POST方式请求

axios.post(“http://localhost:8080/aa/test2”,{

id:2,

username:“王恒杰”

}).then(function (response) {

console.log(response.data);

}).catch(function (err) {

console.log(err)

})

  • **注意: post接收数据时,需要在参数上添加 ** requestBody

8. axios并发请求

并发请求: 将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

function getUserAccount() {

return axios.get(‘/user/12345’);

}

function getUserPermissions() {

return axios.get(‘/user/12345/permissions’);

}

axios.all([getUserAccount(), getUserPermissions()])

.then(axios.spread(function (acct, perms) {

// 两个请求现在都执行完成

}));

9.自定义配置对象发送请求

//自定义配置对象发送请求(创建实例 发送异步请求) 【企业开发必背】

var instaus = axios.create({

baseURL:“http://localhost:8080/aa/”,

// timeout: 5000 //设置响应超时时间 如果超过了5000秒报异常

});

instaus.get(“test1?id=3&username=yfj”)

.then(function (response) {

console.log(response.data);

})

.catch(function (err) {

console.log(err);

})

10、 拦截器

  • 作用:抽取共有代码 解决冗余问题,提升效率,提高程序的可维护性

axios中的拦截器:解决冗余问题

请求拦截器:发送请求时可以进行拦截,添加功能

响应拦截器:响应回来时进行拦截 添加功能

var instaus = axios.create({

baseURL:“http://localhost:8080/aa/”,

// timeout: 5000 //设置响应超时时间 如果超过了5000秒报异常

});

//添加请求拦截器

instaus.interceptors.request.use(function (config) {

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

性能

linux

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/33347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家政小程序开发,打造方便快捷的家政市场

随着生活水平的提高&#xff0c;对家政的需求也在逐渐增加。不过在市场中&#xff0c;传统的家政服务存在严重的信息差&#xff0c;需要花费大量时间才可以找到合适的家政人员&#xff0c;效率较低。 互联网家政小程序因此出现&#xff0c;它能够直接连接用户与家政人员&#…

深入理解Qt属性系统[Q_PROPERTY]

Qt 属性系统是 Qt 框架中一个非常核心和强大的部分&#xff0c;它提供了一种标准化的方法来访问对象的属性。这一系统不仅使得开发者能够以一致的方式处理各种数据类型&#xff0c;还为动态属性的管理提供了支持&#xff0c;并与 Qt 的元对象系统紧密集成。在这篇文章中&#x…

WPF——属性

一、属性 类最初只有字段与函数&#xff0c;字段为一个变量&#xff0c;访问权限可以是private&#xff0c;protected&#xff0c;public。而将字段设为private&#xff0c;不方便外界对类数据的操作&#xff0c;但是将字段设为public又怕外界对数据进行非法操作&#xff0c;于…

尴尬时刻:如何在忘记名字时巧妙应对

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

llama系列模型学习

一、目录 llama1 模型与transformer decoder的区别llama2 模型架构llama2 相比llama1 不同之处llama3 相比llama2 不同之处llama、llama2、llama3 分词器词表大小以及优缺点采用的损失函数是什么&#xff1f;为什么Layer Norm 改为RMS Norm?如何消除模型幻觉&#xff1f; 二…

Vscode配置Verilog开发环境(二)

两年前我写过一篇vscode配置fpga开发环境的博客&#xff0c;近期发现查看的人数还是比较多的&#xff0c;经过两年的使用&#xff0c;优化了代码模板以及删减了一些插件等等&#xff0c;因此有了本文。 目前我的vscode只有下图中的九个插件&#xff0c;相比前文已经减少了一些了…

地级市绿色创新及碳排放与环境规划数据(2000-2021年)

数据简介&#xff1a;分享各个城市对于碳排放的降低做出了哪些共享。该数据是地级市2000-2021年间由绿色创新、碳排放与环境规制数据构成的能源与环境研究数据大合集&#xff0c;并对其进行可视化处理&#xff0c;供大家研究使用。当今我国大力推进生态文明建设、美丽中国建设等…

【日常开发之Windows共享文件】Java实现Windows共享文件上传下载

文章目录 Windows 配置代码部分Maven代码 Windows 配置 首先开启服务&#xff0c;打开控制面板点击程序 点击启用或关闭Windows功能 SMB1.0选中红框内的 我这边是专门创建了一个用户 创建一个文件夹然后点击属性界面&#xff0c;点击共享 下拉框选择你选择的用户点击添加…

python爬虫必须要高匿IP吗 ?

各个平台搜索关键词就可以找到不同品牌的代理IP了。 找倒是不难&#xff0c;难的是能从中挑选出靠谱且合适的代理品牌。 在选择代理IP这块&#xff0c;不建议使用免费和超低价的代理&#xff0c;因为这一类的代理往往非常不稳定&#xff0c;很多都被网站拉黑过&#xff0c;特…

PS添加物体阴影

一、选择背景&#xff0c;确保物体和北京分割出图层 二、右键单击物体图层&#xff0c;点击混合选项&#xff0c;点击投影 三、调整参数&#xff0c;可以看效果决定(距离是高度&#xff0c;扩展是浓度&#xff0c;大小是模糊程度)&#xff0c;保存即可

实用软件下载:CrossOver 2024最新安装包及详细安装教程

​根据软件大数据显示上传或者手动输入软件都非常简单&#xff0c;一般来说CrossOver会自动连接到一个Win文件共享服务器&#xff08;Samba或CIFS&#xff09;上&#xff0c;使用者能够直接在这个服务器中选择并上传软件执行文件。实际上我们可以这样讲调整CrossOver设置&#…

汽车数据应用构想(五)

如果说路面信息&#xff08;POI&#xff09;可以通过采集车、人工等方式来获取&#xff0c;用户习惯可以通过手机生态应用来获取&#xff0c;那么车的信息应该算是车辆独有的垂直领域价值了&#xff0c;它是实实在在只有车厂才拥有的数据财富&#xff0c;任何互联网大厂都抢不走…

如何使用mapXplore将SQLMap数据转储到关系型数据库中

关于mapXplore mapXplore是一款功能强大的SQLMap数据转储与管理工具&#xff0c;该工具基于模块化的理念开发&#xff0c;可以帮助广大研究人员将SQLMap数据提取出来&#xff0c;并转储到类似PostgreSQL或SQLite等关系型数据库中。 功能介绍 当前版本的mapXplore支持下列功能…

一条Redis命令是如何执行的?

一条Redis命令是如何执行的&#xff1f; 源码结构核心数据结构redisServerredisClientredisDbredisObjectaeEventLoop 核心流程redis启动流程main() 主循环aeEventProcess执行过程命令执行的流程过程1&#xff08;redis启动&#xff09;过程2&#xff08;客户端与服务端建立链接…

【Android】Android Studio 使用Kotlin写代码时代码提示残缺问题解决

问题描述 Android Studio升级之后&#xff0c;从Android Studio 4.2升级到Android Studio Arctic Fox版本&#xff0c;因为项目比较老&#xff0c;使用的Gradle 版本是3.1.3&#xff0c;这个版本的Android Studio最低支持Gradle 3.1版本&#xff0c;应该算是比较合适的版本。 …

不翻墙安装yolov8环境下的RT-DETR并实现PCB表面缺陷检测

目录 一、新建conda环境二、安装yolov8环境1.克隆安装包2.安装依赖包3.测试模型 任务2&#xff1a;基于RT-DETR实现PKU-PCB表面缺陷检测数据准备 数据增强测试 总结 一、新建conda环境 创建并激活conda环境&#xff1a; 在conda创建一个名为yolov8的新环境&#xff0c;并在其中…

国际网络专线的开通流程

1. 选择服务商&#xff1a;首先&#xff0c;您需要选择一个可靠的服务商来提供国际网络专线服务。确保服务商具有良好的声誉和专业知识&#xff0c;以便为您提供高质量的网络连接和支持。 2. 评估需求&#xff1a;在与服务商沟通之前&#xff0c;您需要明确自己的网络需求。这…

dp经典问题:LCS问题

dp&#xff1a;LCS问题 最长公共子序列&#xff08;Longest Common Subsequence, LCS&#xff09;问题 是寻找两个字符串中最长的子序列&#xff0c;使得这个子序列在两个字符串中出现的相对顺序保持一致&#xff0c;但不要求连续。 力扣原题链接 1.定义 给定两个字符串 S1…

猫狗识别—视频识别

猫狗识别—视频识别 1. 导入所需的库&#xff1a;2. 创建Tkinter主窗口并设置标题&#xff1a;3. 设置窗口的宽度和高度&#xff1a;4. 创建一个Canvas&#xff0c;它将用于显示视频帧&#xff1a;5. 初始化一个视频流变量cap&#xff0c;用于存储OpenCV的视频捕获对象&#xf…

【速速收藏】适用于Linux系统的五个优秀PDF编辑器

PDF (Portable Document Format) 是便携文档格式的缩写&#xff0c;这是一种用于电子共享文档的标准格式&#xff0c;广泛应用于各种文档类型的存储和分发。然而&#xff0c;有时我们可能需要对PDF文档进行更改和编辑。本文将介绍五款在Linux平台上广受欢迎的PDF编辑器。 ​​…