Axios网络请求

news/2024/10/31 3:19:54/

Alt哈喽~大家好,这篇来看看Axios网络请求。

​文章推荐链接
SpringCloud Sentinel 使用SpringCloud Sentinel 使用
将Nacos注册到springboot使用以及Feign实现服务调用将Nacos注册到springboot使用以及Feign实现服务调用
微服务介绍与 SpringCloud Eureka微服务介绍与 SpringCloud Eureka

目录

  • 一、前言
    • 1、什么是Axios?
    • 2、Axios特性
  • 二、安装Axios
  • 三、Axios的用法
    • 1、发送GET请求
    • 2、发送POST请求
    • 3、async/await
    • 4、其他请求方式
  • 四、Axios与Vue整合
  • 五、跨域问题
    • 1、什么是跨域
    • 2、为什么会出现跨域问题?
    • 3、跨域问题解决
    • 4、前端代码
    • 5、后端代码讲解
    • 6、前端代码讲解
  • 六、拦截器

一、前言

1、什么是Axios?

在实际项目开发中,前端页面所需要的数据往往需要从服务器端获取,这必然涉及与服务器的通信。

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。

Axios 在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换 。

Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get、post请求。说到get、post,大家应该第一时间想到的就是Jquery吧,毕竟前几年Jquery比较火的时候,大家都在用他。但是由于Vue、React等框架的出现,Jquery也不是那么吃香了。也正是Vue、React等框架的出现,促使了Axios轻量级库的出现,因为Vue等,不需要操作Dom,所以不需要引入Jquery.js了。官方网站

2、Axios特性

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

二、安装Axios

使用npm:

npm install axios

下载完了之后在package.json里面查看是否有axios的版本号,有就表示已经下载成功了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eFtnC9wB-1675245894988)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104194956815.png)]

三、Axios的用法

1、发送GET请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k92F2PkB-1675245894990)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104195313209.png)]

2、发送POST请求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LlH1xvwX-1675245894990)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104195330737.png)]

3、async/await

async和await是ES8引入的新语法,准确说来是异步函数实现的语法糖,使用async和await可以更加方便的进行异步操作

async 关键字用于函数上(async函数的返回值是Promise实例对象)

await 关键字用于 async 函数当中(await可以得到异步的结果)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0D4I08uA-1675245894991)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104195423579.png)]

4、其他请求方式

参考这里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X9poF4g2-1675245894991)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104195523677.png)]

四、Axios与Vue整合

在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题:

每个组件中都需要导入 axios

每次发请求都需要填写完整的请求路径

可以通过全局配置的方式解决上述问题

axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$http = axios
Vue.config.productionTip = false

axios.defaults.baseURL 作用:如果axios发送的AJAX请求的URL不是完整路径的话,就拼接baseURL前缀

Vue.prototype.http作用:http 作用:http作用:http就在所有的Vue实例中可以用了

Vue.config.productionTip 作用:作用——阻止vue启动生产消息,阻止的内容如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l7P8x3wb-1675245894992)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104200301930.png)]

五、跨域问题

1、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

2、为什么会出现跨域问题?

为了保证浏览器的安全,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源,称为同源策略,同源策略是浏览器安全的基石

同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域,此时无法读取非同源网页的 Cookie,无法向非同源地址发送 AJAX 请求

3、跨域问题解决

CORS(Cross-Origin Resource Sharing)是由W3C制定的一种跨域资源共享技术标准,其目的就是为了解决前端的跨域请求。

CORS可以在不破坏即有规则的情况下,通过后端服务器实现CORS接口,从而实现跨域通信。

CORS将请求分为两类:简单请求和非简单请求,分别对跨域通信提供了支持。

在前端代码与后端代码连接时(前后端分离),常常因为跨域问题而连接不上,那么如何解决呢?

在 export default 里面使用created:function方法,代码如下

4、前端代码

    created:function(){var _this = this;axios.get("http://localhost:8088/user/findAll").then(function(response){_this.tableData = response.data;// console.log(response.data)})// this.$http.get("/user/findAll").then((response)=>{//   this.tableData = response.data;//   // console.log(response.data)// })},

5、后端代码讲解

在控制层加上 @CrossOrigin 注解 或者自定义配置类

package com.example.mpdemo.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;// 使用了注解 @CrossOrigin,就可以不用 CorsConfig 配置类了
// @Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许跨域访问的路径.allowedOrigins("*") // 允许跨域访问的源.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求的方法.maxAge(16800) // 预间隔时间.allowedHeaders("*") // 允许头部设置.allowCredentials(true); // 是否发送 cookie}
}

这里就使用注解的方式

我们看看控制层

package com.example.mpdemo.controller;import com.example.mpdemo.mapper.OrderMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
public class OrderController {@Autowiredprivate OrderMapper orderMapper;@GetMapping("/order/findAll")public List findAll(){List orders = orderMapper.selectAllOrdersAndUser();return orders;}}

调用OrderMapper的selectAllOrdersAndUser方法

OrderMapper代码

package com.example.mpdemo.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.mpdemo.entity.Order;
import com.example.mpdemo.entity.User;
import com.sun.org.apache.xpath.internal.operations.Or;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface OrderMapper extends BaseMapper<Order> {@Select("select * from t_order where uid = #{uid}")List<Order> selectByUid(int uid);//  查询所有的订单,同时查询订单的用户@Select("select * from t_order")@Results({@Result(column = "id",property = "id"),@Result(column = "ordertime",property = "ordertime"),@Result(column = "total",property = "total"),@Result(column = "uid",property = "user",javaType = User.class,one=@One(select = "com.example.mpdemo.mapper.UserMapper.selectById"))})List<Order> selectAllOrdersAndUser();
}

数据库结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kvNEpEkL-1675245894992)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104201213365.png)]

6、前端代码讲解

Hello.vue 代码

<template>
<div><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="username"label="姓名"width="180"></el-table-column><el-table-columnprop="password"label="密码"width="180"></el-table-column><el-table-columnprop="birthday"label="出生年月"width="180"></el-table-column></el-table><!-- <i class="fa fa-camera-retro fa-lg"></i> -->
</div>
</template><!-- props 自定义属性,可以在外部使用自定义的名称,不需要导入的方式来进行套娃 -->
<script>// import axios from "axios";export default {name: "Hello",data: function(){return {tableData: []}},created:function(){var _this = this;axios.get("http://localhost:8088/user/findAll").then(function(response){_this.tableData = response.data;// console.log(response.data)})// this.$http.get("/user/findAll").then((response)=>{//   this.tableData = response.data;//   // console.log(response.data)// })},methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}}
}
</script><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style>

就是发了个请求,将数据放到tableData里面并渲染到页面上。

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AzZw1a8f-1675245894993)(C:\Users\小熊\AppData\Roaming\Typora\typora-user-images\image-20221104201517107.png)]

六、拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

如果你稍后需要移除拦截器,可以这样:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

Alt


http://www.ppmy.cn/news/21373.html

相关文章

Java程序设计实验3 | 面向对象(上)

*本文是博主对Java各种实验的再整理与详解&#xff0c;除了代码部分和解析部分&#xff0c;一些题目还增加了拓展部分&#xff08;⭐&#xff09;。拓展部分不是实验报告中原有的内容&#xff0c;而是博主本人自己的补充&#xff0c;以方便大家额外学习、参考。 目录 一、实验…

OAuth2介绍

目录 一、什么是OAuth2 二、OAuth2中的角色 三、认证流程 四、令牌的特点 五、OAuth2授权方式 授权码 隐藏方式 密码方式 凭证方式 一、什么是OAuth2.0 概念&#xff1a;第三方授权解决方案 OAuth2.0是目前使用非常广泛的授权机制&#xff0c;用于授权第三方应用获取…

【Redis】.net core 3.1 Redis安装和简单使用

Redis&#xff08;Remote Dictionary Server )&#xff0c;即远程字典服务&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 简单来说&#xff0c;就是一个键值对数据库。 Redis支持的…

【DataX】datax | datax-web | win搭建datax-web环境

一、环境准备 1、jdk8 2、maven 3、mysql7 4、python3 5、window10 6、idea 7、2345解压&#xff08;win支持tar.gz解压&#xff09; 8、git 二、操作步骤 1、datax操作步骤 1&#xff09;下载datax http://datax-opensource.oss-cn-hangzhou.aliyuncs.com/datax.tar.gz 2&am…

maxcomputer的分区表相关操作

– 查看xsxw(学生行为表定义) desc xsxw; – 查看xsxw1(学生行为表定义) desc xsxw1; – 上面的两张表是通过ddl语句创建的分区表 – 创建ddl语句如下 – CREATE TABLE IF NOT EXISTS xsxw1( – xwsj STRING COMMENT ‘行为时间’, – xh STRING COMMENT ‘学号’, – xwdd ST…

关于Vue中Diff算法详解

一、(Diff)是什么? diff 算法是一种通过同层的树节点进行比较的高效算法 1.1. 特点&#xff1a; 比较只会在同层级进行, 不会跨层级比较在diff比较的过程中&#xff0c;循环从两边向中间比较diff 算法的在很多场景下都有应用&#xff0c;在 vue 中&#xff0c;作用于虚拟 dom…

Pytorch安装及环境配置详细教程(CUDA版本)

文章目录前言一、查看GPU支持的CUDA版本二、安装CUDA三、确定torch、torchvision和python版本四、安装anaconda五、安装torch和torchvision前言 安装cuda版本的pytorch时踩了不少坑&#xff0c;网上安装pytorch的版本很多&#xff0c;一般的教程都是到pytorch的官网&#xff0…

Spring-基础知识二

Spring9.Spring JdbcTemplate的使用9.1 JdbcTemplate入门9.1.1 需要的包9.1.2 代码测试9.2 将数据源和jdbcTemplate交给Spring来管理9.2.1 druid连接池9.2.2 使用外部文件配置数据连接信息9.3 基于JdbcTemplate实现DAO9.Spring的事务管理机制9.1 PlatformTransactionManager 事…