[JavaScript][AJAX]axios拦截器,axios基地址,get与post区别；实现非空判断；e.preventDefault()；事件委托-CSDN博客

本文链接：https://blog.csdn.net/wusandaofwy/article/details/126561607

为什么要阻止默认事件(e.preventDefault())

axios拦截器(interceptors)

官方文档解释如下:

axios官方中文文档拦截器

🏆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方法实现非空判断,逻辑类似于逻辑或判断

MDN 官方详解 MDN 数组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()
        }