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

相关推荐
✎ ﹏梦醒͜ღ҉繁华落℘14 分钟前
WPF学习(动画)
学习·wpf
木头没有瓜28 分钟前
vscode离线安装插件
ide·vue.js·vscode
循环过三天1 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
生如夏花℡1 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
之歆1 小时前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
幽络源小助理1 小时前
SpringBoot基于JavaWeb的城乡居民基本医疗信息管理系统
java·spring boot·学习
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式