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

相关推荐
Struggler28111 分钟前
Chrome插件开发
前端
许白掰12 分钟前
Linux入门篇学习——借助 U 盘或 TF 卡拷贝程序到开发板上
linux·学习·借助 u 盘拷贝程序到开发板上·借助 tf卡拷贝程序到开发板上
前端 贾公子23 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip