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

相关推荐
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
周周记笔记4 小时前
学习笔记:第一个Python程序
笔记·学习
孩子 你要相信光4 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军4 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
优雅鹅4 小时前
ARM、AArch64、amd64、x86_64、x86有什么区别?
arm开发·学习
huangql5204 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
..过云雨4 小时前
05.【Linux系统编程】进程(冯诺依曼体系结构、进程概念、进程状态(注意僵尸和孤儿)、进程优先级、进程切换和调度)
linux·笔记·学习
Qlittleboy4 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
咸甜适中4 小时前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui
Days20504 小时前
LeaferJS好用的 Canvas 引擎
前端·开源