零基础学Axios-EW帮帮网

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)
})

零基础学Axios