目录
为什么要阻止默认事件(e.preventDefault())
axios拦截器(interceptors)
官方文档解释如下:
🏆1.拦截器作用：在请求与响应被then处理之前响应
🏆2.拦截器工作流程：
（1）进入请求拦截器
（2）发送请求
（3）服务器处理
（4）进入响应拦截器
（5）执行响应then
🏆3.拦截器应用场景：
(1)免登录功能
(2)全局loading
代码如下:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
axios拦截器实现loading效果:
我在代码中标记了”💎”的地方是我增加的部分,
css和html中已经写好了一个类名为”loading-box”的盒子为加载效果,
于是我在请求拦截器的返回config之前,增加使盒子显示的代码,
在响应拦截器的返回response之前,增加使盒子消失的代码
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 💎显示loading效果
document.querySelector('.loading-box').style.display = 'block'
// 在发送请求之前做些什么
return config;//把请求的配置发送给服务器
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);//返回错误
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
//💎隐藏loading效果
document.querySelector('.loading-box').style.display = 'none'
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;//把响应数据给then方法的res
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
axios基地址
🏆全局设置axios基地址
(1)如果axios自己写了基地址，优先用axios自己写的
（2）如果axios没有写基地址，就会用baeURL
语法如下:
axios.defaults.baseURL = ‘基地址’
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'
get与post区别
🏆get与post区别(掌握)
– 1.传参方式不同
– get在url后面拼接(请求行)
– post在请求体传参
– 2.大小限制不同
– get有大小限制，不同浏览器大小限制不同。 一般2-5 MB
– post没有大小限制
– 3.安全性不同
– get参数直接暴露在url，不安全(一般查询类数据都是get)
– post参数在请求体中，更加安全（一般登录注册必须是post）
– 4.传输速度不同
– get传输速度快
– post传输速度慢
- 区别之间的联系:
- 正是由于传参方式不同导致了安全性不同
- 正是由于大小限制不同导致了传输速度不同
🏆 其他请求方法
| 请求方式 | 描述 | 特点 |
| ——– | ————————– | ————— |
| post | 一般用于新增数据(提交数据) | 请求体传参 |
| get | 一般用于查询数据(查询数据) | 请求行(url)传参 |
| delete | 一般用于删除数据 | 请求体传参 |
| put | 一般用于更新全部数据 | 请求体传参 |
| patch | 一般用于更新局部数据 | 请求体传参 |
-
put和pacth区别
全局更新 : put
局部更新: patch
实现非空判断
非空判断
:获取用户输入的数据,然后判断数据是否为空作用:减小服务器的压力, 空的数据不去传输,只传输有内容的数据,减小了服务器压力,
逐个判断
如果数据较少时,我们可以用单独判断,或者用逻辑或判断是否为空
单独判断:
if (!bookname) {
return alert(‘请输入完整信息!!!!!!!!’)
}
几个数据用逻辑或判断
if (!bookname || !author || !publisher) {
return alert(‘请输入完整信息!!!!!!!!’)
}
利用数组的some方法
💎但是当一个如果我们做了一个有几十个乃至上百个数据非空判断时,
逐个判断非空就效率过低了
💎此时我们可以把我们得到数据全部push进一个数组data,
利用数组的some方法实现非空判断,逻辑类似于逻辑或判断
some()
方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
代码如下:
data是存入需要判断的数据的数组
if(data.some(item => item === '')) return alert('请输入完整数据')
为什么要阻止默认事件(e.preventDefault())
拥有默认事件的对象:
1.html的a标签<a></a>点击自动跳转
2.button(type=submit)按钮的提交行为，
3.input输入框默认的点击获取焦点等
有的时候我们不想要触发执行默认事件，
需要阻止元素的默认事件：
e.preventDefault()
举个例子;
button(type=submit)按钮的提交行为,如果我们不阻止的话,
我们一点击网页就会自动跳转,并且表单内容清空,这样我们就,无法获取表单内容来,进行数组传输
所以需要阻止默认事件
document.querySelector('button[type="submit"]')
.addEventListener('click', function (e) {
// 阻止传输数据默认事件,
e.preventDefault()
}