Ajax笔记02 axios请求及拦截器

1.Ajax提交表单数据的用法

1. 表单的组成部分：表单标签（form）、表单域（input、texyarea、select）、表单按钮（submit、reset）
2. 表单的作用是收集数据
3. 阻止表单默认提交事件：e.preventDefault()
4. jQuery中的serialize()：获取到的form表单数据类型为a=1&b=2&c=3，可以发送给data使用

2.axios请求方法简写

• axios的get请求，简写：
  1. 无参类型：axios.get(‘地址’).then(res => {})
  2. 有参类型：axios.get(‘地址’,{params:{}}).then(res => {})
• axios的post请求，必须有参数，简写：
  1. axios.post(‘地址’,{}).then(res => {})

3.axios拦截器的用法

3.1axios拦截器

• 拦截器用来全局拦截axios的每一次请求与响应
• 好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性

3.2axios请求拦截器

• 在axios.js文件之后，在所有axios发送之前，进行拦截器配置
• 基础写法：

	axios.interceptors.request.use(function(config){
   
		//在发送请求要做的事情的代码
		return config;
	},function(error){
   
		//队请求错误做些什么的代码
		return Promise.reject(error);
	})

3.3axios响应拦截器

• 在axios.js文件之后，在所有axios发送之前，进行拦截器配置
• 基础写法：

	axios.interceptors.response.use(function(response){
   
		//在发送请求要做的事情的代码
		return response;
	},function(error){
   
		//队请求错误做些什么的代码
		return Promise.reject(error);
	})

3.4全局配置根路径

• axios.defaults.baseURL = ‘地址’

3.5拦截器案件演示

<script src="../jquery-v3.6.0.js">