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