零基础学Axios
Axios官网：Axios官网
想用Axios前需要在项目中安装axios,安装方式如下：
下列是axios请去方式，本文主要讲解post和get请求，其他请求和这两种请求方法相同。
1 get请求
1.1 不带请求参数
前端
后端
1.2 带请求参数
前端
写法一（推荐）
写法二：
但是这种写法在遇到特殊字符，需要进行处理。不处理的后果如下。（后端接收不到参数）
处理方式
后端
2 post请求
2.1 不带请求参数
前端
后端
2.2 带请求参数
方式一
参数放在请求头，不是很推荐
前端
后端
方式二
参数放在请求体
（post请求第二个就是请求体）
前端
后端
后端需要进行处理，不然接收不到请求参数
处理方式（后端处理）
写法一：
写法二：将接收参数直接封装一个对象
方式三
这种方式和方式二都是将参数放在请求体，但是方式二是后端来进行处理，方式三是前端进行处理，后端不用做处理。
前端
写法一
写法二
后端
方式四
前端
后端
写法一
写法二
3 配置项
在项目中，可能每个请求都要设置请求头或一些其他设置，若在每个请求中都来进行设置，那将十分繁琐。我们可利用下面的配置来进行统一处理。
import axios from 'axios'
// 创建一个新的axios实例
const request = axios.create({
baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
timeout: 5000
})
一般我们会将配置项，单独抽离到一个文件中，需要用到配置项的文件自行导入
使用
3.1 withCredentials 使用场景
在跨域情况下，后端传给前端的JSESSIONID通常不会自动保存。
这是因为浏览器的同源策略限制。当进行跨域请求时，浏览器会对跨域的 Cookie 进行严格的限制。默认情况下，浏览器不会自动将跨域响应中的JSESSIONID保存到本地的 Cookie 中。如果需要
在跨域情况下传递和保存JSESSIONID，可以采取以下方法：
后端：在后端的响应中添加特定的 CORS 响应头，允许跨域请求携带 Cookie。例如，在 Java Spring Boot 中，可以通过配置WebMvcConfigurer来实现：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://your-frontend-url.com")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true);
}
}或在注解上加上allowCredentials
前端 ：前端是需要配合处理的
在前端的请求中，确保设置了withCredentials为true，以告知浏览器在跨域请求中包含凭证。例如在 Axios 中：
在不跨域的情况下，浏览器通常会自动保存服务器返回的 JSESSIONID。
4 响应数据
后端返回给前端的数据都在data下面。
5 拦截器
5.1 请求拦截器
可以在这么统一加上请求头token什么的。
// 添加请求拦截器
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
5.2 响应拦截器
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
const res = response.data
if (res.status !== 200) {
return Promise.reject(res.message)
}
return res
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})