零底子学Axios

Axios官网：Axios官网 
想用Axios前需要在项目中安装axios,安装方式如下：

下列是axios请去方式，本文主要讲解post和get哀求，其他哀求和这两种哀求方法类似。

1 get哀求

1.1 不带哀求参数

前端

后端

 
1.2 带哀求参数 

前端
写法一（推荐）

写法二：

但是这种写法在遇到特殊字符，需要举行处置惩罚。不处置惩罚的后果如下。（后端吸取不到参数）

处置惩罚方式

后端 

2 post哀求 

2.1 不带哀求参数

前端

后端 

2.2 带哀求参数 

方式一

参数放在哀求头，不是很推荐
前端

 后端

方式二 

参数放在哀求体
（post哀求第二个就是哀求体）
前端

后端
后端需要举行处置惩罚，不然吸取不到哀求参数

 处置惩罚方式（后端处置惩罚）
        写法一：

        写法二：将吸取参数直接封装一个对象

 方式三

这种方式和方式二都是将参数放在哀求体，但是方式二是后端来举行处置惩罚，方式三是前端举行处置惩罚，后端不用做处置惩罚。
前端
    写法一

   写法二

后端

 方式四

前端

后端
     写法一

   写法二

3 配置项

在项目中，大概每个哀求都要设置哀求头或一些其他设置，若在每个哀求中都来举行设置，那将十分繁琐。我们可使用下面的配置来举行同一处置惩罚。

1. import axios from 'axios'
3. // 创建一个新的axios实例
4. const request = axios.create({
5.   baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
6.   timeout: 5000
7. })

复制代码

 
 一样平常我们会将配置项，单独抽离到一个文件中，需要用到配置项的文件自行导入

使用 

 
 3.1 withCredentials 使用场景

在跨域情况下，后端传给前端的JSESSIONID通常不会自动保存。
这是由于浏览器的同源计谋限制。当举行跨域哀求时，浏览器会对跨域的 Cookie 举行严格的限制。默认情况下，浏览器不会自动将跨域相应中的JSESSIONID保存到本地的 Cookie 中。如果需要
在跨域情况下传递和保存JSESSIONID，可以接纳以下方法：
后端：在后端的相应中添加特定的 CORS 相应头，答应跨域哀求携带 Cookie。例如，在 Java Spring Boot 中，可以通过配置WebMvcConfigurer来实现：

1. import org.springframework.context.annotation.Configuration;
2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
5. @Configuration
6. public class CorsConfig implements WebMvcConfigurer {
8.     @Override
9.     public void addCorsMappings(CorsRegistry registry) {
10.         registry.addMapping("/**")
11.                .allowedOrigins("http://your-frontend-url.com")
12.                .allowedMethods("GET", "POST", "PUT", "DELETE")
13.                .allowCredentials(true);
14.     }
15. }

复制代码

或在注解上加上allowCredentials

前端 ：前端是需要共同处置惩罚的
在前端的哀求中，确保设置了withCredentials为true，以告知浏览器在跨域哀求中包罗凭据。例如在 Axios 中：

在不跨域的情况下，浏览器通常会自动保存服务器返回的 JSESSIONID。 
4 相应数据 

后端返回给前端的数据都在data下面。
5 拦截器 

5.1 哀求拦截器

可以在这么同一加上哀求头token什么的。

1. // 添加请求拦截器
2. request.interceptors.request.use(function (config) {
3.   // 在发送请求之前做些什么，
4.   return config
5. }, function (error) {
6.   // 对请求错误做些什么
7.   return Promise.reject(error)
8. })

复制代码

5.2 相应拦截器

1. // 添加响应拦截器
2. request.interceptors.response.use(
3. function (response) {
4.   // 对响应数据做点什么
5.   const res = response.data
6.   if (res.status !== 200) {
7.     return Promise.reject(res.message)
8.   }
9.   return res
10. }, function (error) {
11.   // 对响应错误做点什么
12.   return Promise.reject(error)
13. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。