首页 > 其他分享 >零基础学Axios

零基础学Axios

时间:2024-09-24 16:50:41浏览次数:10  
标签:Axios 请求 前端 基础 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

前端 :前端是需要配合处理的

在前端的请求中,确保设置了withCredentialstrue,以告知浏览器在跨域请求中包含凭证。例如在 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,请求,前端,基础,axios,参数,写法,跨域
From: https://blog.csdn.net/m0_75165868/article/details/142487332

相关文章

  • Docker-Swarm介绍及基础使用
    Docker-Swarm参考:Swarmmode|Docker从入门到实践Docker1.12Swarmmode(opensnewwindow)已经内嵌入Docker引擎,成为了docker子命令dockerswarm。请注意与旧的DockerSwarm区分开来。Swarmmode内置kv存储功能,提供了众多的新特性,比如:具有容错能力的去中......
  • 【全新课程】正点原子《ESP32基础及项目实战入门》培训课程上线!
    正点原子《ESP32物联网项目实战》全新培训课程上线啦!正点原子工程师手把手教你学!熟练掌握ESP-IDF开发,突破ESP32入门难题!一、课程介绍本课程针对ESP32的入门和基础外设进行系统教学,内容包括环境搭建、编程软件使用、外设基础知识、模块驱动及多个实战项目。课程旨在帮助学员掌握E......
  • react-基础
    React基础React介绍目标任务:了解什么是React以及它的特点React是什么一个专注于构建用户界面的JavaScript库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内是最流行的js前端框架,最近发布了18版本,加入了很多新特性React英文文档(https://reactjs.or......
  • Windows内核编程基础(1)
    在前面的文章中,介绍了如何配置开发环境以及如何进行调试。接下来的几篇文章,将会重点介绍内核编程中所需要了解的一些理论基础。我写这个系列文章的主要目的是方便以后自己查阅,同时也给正在学习内核开发的小伙伴一些参考,所以我会尽可能地以最简单的方式进行描述。如果在阅读......
  • 日新月异 PyTorch - pytorch 基础: K-means 聚类算法(sklearn.cluster 的 KMeans 实现,
    源码https://github.com/webabcd/PytorchDemo作者webabcd日新月异PyTorch-pytorch基础:K-means聚类算法(sklearn.cluster的KMeans实现,对一个包含10个特征的数据做分类)示例如下:basic\demo07.py'''K-means聚类算法(sklearn.cluster的KMeans实现,对一个包含1......
  • 01.Java基础语法
    1.注释1.1单行注释//单行注释1.2多行注释/*多行注释:可以注释一段文字*/1.3JavaDoc:文档注释/***文档注释*/2.标识符Java所有的组成部分都需要名字。类名、变量名以及方法名都被称为标识符。2.1标识符注意点所有标识符都应该以字母、$、_开始首字母之后可以是......
  • 日新月异 PyTorch - numpy 基础: numpy 数组的添加和删除,以及常用函数
    源码https://github.com/webabcd/PytorchDemo作者webabcd日新月异PyTorch-numpy基础:numpy数组的添加和删除,以及常用函数示例如下:numpy\demo5.pyimportnumpyasnp#数组的添加和删除defsample1():a=np.array([[1,2,3],[4,5,6]])print(a)'......
  • 日新月异 PyTorch - pytorch 基础: 张量的基础操作
    源码https://github.com/webabcd/PytorchDemo作者webabcd日新月异PyTorch-pytorch基础:张量的基础操作示例如下:basic\demo01.py#本例用于演示torch张量的基础操作,其操作与numpy基本相同(注:看本例之前先要把numpy弄懂)#torch可以支持在gpu上运算,而numpy......
  • 日新月异 PyTorch - pytorch 基础: 自动求导
    源码https://github.com/webabcd/PytorchDemo作者webabcd日新月异PyTorch-pytorch基础:自动求导示例如下:basic\demo02.pyimporttorchimportmath#自动求导的简单说明defsample1():#requires_grad用于表示是否需要自动求导k=torch.tensor(1.23......
  • 日新月异 PyTorch - pytorch 基础: 通过卷积神经网络(Convolutional Neural Networks,
    源码https://github.com/webabcd/PytorchDemo作者webabcd日新月异PyTorch-pytorch基础:通过卷积神经网络(ConvolutionalNeuralNetworks,CNN)做图片分类-通过ResNet50做图片分类的学习(对cifar10数据集做训练和测试),保存训练后的模型,加载训练后的模型并评估指定的......