Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）

news2025/1/17 5:52:47

目录

一、axiox

1.1、axios 简介

1.2、axios 基本使用

1.2.1、下载核心 js 文件.

1.2.2、发送 GET 异步请求

1.2.3、发送 POST 异步请求

1.2.4、发送 GET、POST 请求最佳实践

1.3、请求响应拦截器

1.3.1、拦截器解释

1.3.2、请求拦截器的使用

1.3.3、响应拦截器的使用

1.3.4、拦截器在 Vue 脚手架中的使用（最佳实践）

一、axiox

1.1、axios 简介

axios 用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新局部.

1.为什么不使用 ajax 呢？

官方：在 jQuery 中推荐使用 ajax 技术， Vue 里面不推荐使用 jQuery 框架，因此 Vue 更推荐使用 axiox 异步请求库（axios并不是 vue 官方库）.

2.axios 特性

  1. 可以从浏览器中创建 XMLHttpRequests
  2. 可以从 node.js 中创建 http 请求.
  3. 支持 Promise API.
  4. 支持拦截请求和响应.
  5. 转换请求数据和响应数据.
  6. 取消请求.
  7. 自动转换 JSON 格式数据.
  8. 客户端支持防御 XSRF.

1.2、axios 基本使用

1.2.1、下载核心 js 文件.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Ps：建议提前下载下来，放到一个 js 文件夹中，需要的使用引用即可（方便不联网使用）.

1.2.2、发送 GET 异步请求

例如对 http://localhost:8080/user/login?username=cyk&password=1111 发送 get 请求.

Ps：通过 get 请求发送请求中，携带的参数不会封装成 JSON 格式.

前端代码如下：

                    axios.get("http://localhost:8080/user/login?username=cyk&password=1111")
                        .then(function (success) { //success 是自定义响应的参数名
                            //返回成功的响应
                            console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
                            console.log(success.data);
                        }).catch(function (error) { //error 是自定义的响应参数名
                            //返回失败的响应(例如，状态码为 403、500......)
                            console.log(error);
                        })
  • then：表示返回成功的响应需要执行的方法.
  • catch：捕获错误的响应，执行对应的方法.

后端代码如下：

@RestController
@RequestMapping("/user")
public class UserController {

    @RequestMapping("/login")
    public String login(String username, String password) {
        if(!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
            return "账号或密码错误，登录失败";
        }
        if(username.equals("cyk") && password.equals("1111")) {
            return "登录成功";
        }
        return "账号或密码错误，登录失败";
    }

}

前端发送响应后，效果如下：

解释：

  1. CORS 就是解决跨域问题的办法（这里出现了跨域问题，系统给你提示解决办法）.  因为是前端通过 Live Server 插件打开，自动分配 5500 端口，也就意味着，你的请求是从 5500 端口发出，而后端接收响应却是 8080 端口，这导致了跨域问题（浏览器禁止这个操作）
  2. 由于响应是错误的，因此被 axios 的 catch 捕获到，通过 console.log 显示在控制台上.

在微服务项目中，就需要通过 Gataway 来解决.  当前为了方便演示，使用 Spring Boot 处理，因此只需要在 controller 层上加  @CrossOrigin 注解即可解决跨域.

添加注解后后，重启后端服务，重新发送请求，效果如下：

可以看到前端接收到的响应是一个 json 格式的响应.

1.2.3、发送 POST 异步请求

例如对 http://localhost:8080/user/login 发送 POST 请求，携带 JSON 格式参数（axios 自动转化）：{ "username"="cyk", "password"='1111"}.

前端代码如下：

                    axios.post("http://localhost:8080/user/login", { username: "cyk", password: "1111" })
                        .then(function (success) {
                            //返回成功的响应
                            console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
                            console.log(success.data);
                        }).catch(function (error) {
                            //返回失败的响应(例如，状态码为 403、500......)
                            console.log(error);
                        })

后端接收的时候，就要创建一个对应的实体类，并加上 @RequestBody 注解来接收 JSON 格式数据.

@Data
public class Userinfo {

    private String username;
    private String password;

}

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {

    @RequestMapping("/login")
    public String login(@RequestBody Userinfo userinfo) {
        if(userinfo == null || !StringUtils.hasLength(userinfo.getUsername())
                || !StringUtils.hasLength(userinfo.getPassword())) {
            return "账号或密码错误，登录失败";
        }
        if(userinfo.getUsername().equals("cyk") && userinfo.getPassword().equals("1111")) {
            return "登录成功";
        }
        return "账号或密码错误，登录失败";
    }

}

发送请求后，效果如下：

1.2.4、发送 GET、POST 请求最佳实践

通过上述方式，实现了 发送 GET 和 POST 请求，观察仔细的小伙伴会发现，每发送一个请求就需要写一次 请求的 ip 和 端口号，耦合度太高，后期一旦要跟换服务器的 ip 和端口号，所有地方都需要更改.

因此我们可以先创建好一份 axios 实例，将 服务器的 ip 和 port 提前写好，后期需要发送请求的时候再通过这里实例发送对应的路由即可.

具体的通过 axios.create({}) 来出创建实例，传入的是一个对象，对象中的参数有很多，我们只需要知道两个最常用的即可.

  • baseURL：指定请求的目的服务器 ip 和 port.
  • timeout：超时时间（单位是 ms），超过时间没有得到响应，就会直接报超时错误.

示例如下：

        let axiosInstance = axios.create({
            baseURL: "http://localhost:8080",
            timeout: 5000
        });

        let app = new Vue({
            el: "#app",
            methods: {
                httpGet() {
                    axiosInstance.get("/user/login?username=cyk&password=1111")
                        .then(function (success) { //success 是自定义响应的参数名
                            //返回成功的响应
                            console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
                            console.log(success.data);
                        }).catch(function (error) { //error 是自定义的响应参数名
                            //返回失败的响应(例如，状态码为 403、500......)
                            console.log(error);
                        })
                },
                httpPost() {
                    axiosInstance.post("/user/login", { username: "cyk", password: "1111" })
                        .then(function (success) {
                            //返回成功的响应
                            console.log(success); //响应是一个 JSON 格式(axios 自动封装的)
                            console.log(success.data);
                        }).catch(function (error) {
                            //返回失败的响应(例如，状态码为 403、500......)
                            console.log(error);
                        })
                }
            }
        });

Ps：还有其他请求类型，请求格式和 POST 几乎一样.  除了 DELETE 请求和 GET 几乎一样，一般传递的参数只有 id（后端根据 id 删除信息）.

1.3、请求响应拦截器

1.3.1、拦截器解释

用来将 axios 中公共参数，响应进行统一处理，减少 axios 发送请求时或者接收响应时代码的冗余.

1.3.2、请求拦截器的使用

请求拦截器：例如在微服务架构中，我们常常使用 Token 令牌作为用户身份认证标识，也就意味着，前端发送的每个请求中都需要在 header 中添加 Token，这就需要使用 请求拦截器 做统一处理.

这里我们打印出来看看请求拦截器，拦截了哪些东西：

        //创建统一的实例
        let axiosInstance = axios.create({
            baseURL: "http://localhost:8080",
        });

        // axios.interceptors.request.use 这里不使用这种单一创建的方法，而是使用统一的实例，如下

        //请求拦截器
        axiosInstance.interceptors.request.use(function (config) { // 做项目建议还是用箭头函数：(config) => {} ，属于懒汉加载，提高速度
            //自定义参数名，拦截下来的是请求的配置
            console.log(config);
            return config; //这里必须要返回这个参数! 否则报错!
        });

        let app = new Vue({
            el: "#app",
            methods: {
                httpGET() {
                    axiosInstance.get("/user/sayHi")
                        .then(function (success) {
                            console.log(success.data);
                        });
                }
            }
        });

后端代码如下：

    @RequestMapping("/sayHi")
    public String sayHi(String token) {
        if(StringUtils.hasLength(token)) {
            System.out.println(token);
        }
        return "hello!";
    }

效果如下：

可以看到，我们通过 请求拦截器，在请求发到服务器之间，修改配置.

例如将请求拦截下来，在 url 最后加上 token 参数.

        axiosInstance.interceptors.request.use(function (config) {
            console.log(config);
            if (config.url.indexOf("?") == -1) {
                // url 后面没有设置参数. 添加参数时注意加上 "?"
                config.url += "?token=1234";
            } else {
                config.url += "&token=1234";
            }
            return config;
        });

效果如下：

1.3.3、响应拦截器的使用

响应拦截器：对后端发来的所有响应进行拦截，进行 统一处理.

例如可以对错误的响应（catch）进行统一的处理.

        axiosInstance.interceptors.response.use(function (response) { //自定义响应参数名
            console.log(response);
            if (response.status == 500) {
                alert("服务器出现错误");
            }
            //其他错误处理...
            return response; //这里必须返回 response，否则报错
        });

效果如下：

Ps：有了统一响应异常的统一处理之后，axios 中的 catch 部分就可以省略不写了.

1.3.4、拦截器在 Vue 脚手架中的使用（最佳实践）

在 vue 脚手架中，按照标准开发方式，会在 src 目录下创建一个 utils 文件夹，然后在这个文件夹下创建一个 request.js 文件，专门用来封装 axios 实例 和 拦截器. 

如下代码：

import axios from 'axios'

//构建统一 axios 实例
const instance = axios.create({
    baseURL: "http://localhost:8060",
    timeout: 5000
});

instance.interceptors.request.use(config => {
    //加入 Token 数据...
    console.log("请求拦截器");
    return config;
});

instance.interceptors.response.use((success => {
    //业务逻辑处理...
    console.log("成功：响应拦截器");
    return success;
}), error => {
    //业务逻辑处理...
    console.log("失败：响应拦截器");
})

// //暴露 instance 实例对象(这样在其他地方就可以直接使用 instance)
export default instance;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1107720.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

配电房智能化改造在加油站等的应用

配电房智能化改造在加油站等的应用

随着科技的发展和智能化趋势的推进&#xff0c;对加油站配电房进行智能化改造成为了一个必然的选择。智能化改造不仅可以提高加油站的工作效率&#xff0c;减少事故发生率&#xff0c;还可以实现能源的合理利用&#xff0c;提高经济效益。 力安科技加油站智能化改造升级是一种高…
阅读更多...
深度学习——卷积神经网络（CNN）基础三

深度学习——卷积神经网络（CNN）基础三

深度学习——卷积神经网络&#xff08;CNN&#xff09;基础三 文章目录 前言五、汇聚层&#xff08;池化层&#xff09;5.1. 最大池化和平均池化5.2. 填充和步幅5.3. 多个通道5.3. 小结 六、卷积神经网络&#xff08;LeNet&#xff09;6.1. LeNet6.2. 模型训练6.3. 小结 总结 前…
阅读更多...
Centos7 安装 MySQL5.7 步骤

Centos7 安装 MySQL5.7 步骤

Centos7 安装 MySQL5.7 步骤 前言&#xff1a;一 .使用yum源方式安装1、卸载系统自带 mariadb查看并卸载系统自带的 Mariadb 2、下载并安装MySQL官方的 Yum2.1 下载mysql的yum源配置2.2 安装mysql的yum源2.3 使用yum方式安装mysql2.3.1 安装过程中报错解决问题描述解决方案 3、…
阅读更多...
JTS-通过Coordinate点截断几何Geometry

JTS-通过Coordinate点截断几何Geometry

背景 通过一堆点&#xff0c;线上的点或者靠近线的点&#xff0c;来截取线段&#xff0c;将线段截取成多段 代码片段 /*** 通过点截取线&#xff0c;点可以是线上的形状点也可以是靠近线的点** 线　------------------------------------------* 点　. . . …
阅读更多...
YOLO目标检测——复杂场景人员数据集【含对应voc、coco和yolo三种格式标签】

YOLO目标检测——复杂场景人员数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;安防监控、人群管理、自动驾驶、城市规划、人机交互等等数据集说明&#xff1a;YOLO目标检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富。使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(j…
阅读更多...
C++模版初阶讲解

C++模版初阶讲解

今日为大家分享C的模版&#xff0c;这里先把模版的初阶讲解一下&#xff0c;以后再讲解模版进阶&#xff01; 前言&#xff1a;模版的引入 在我们进行学习的编程中&#xff0c;常常会有许多函数的功能相同&#xff0c;有些不同点可能就是其中的数据类型不同&#xff01;如果我…
阅读更多...
Jmeter连接Mysql数据库

Jmeter连接Mysql数据库

一.下载mysql数据驱动 https://dev.mysql.com/downloads/connector/j/ 二、在Jmeter测试计划中添加驱动包 三、jmeter添加配置元件&#xff1a;JDBC Connection Configuration 四、Jmeter发送JDBC请求 五、提取mysql查询结果
阅读更多...
工业交换机的应用场景

工业交换机的应用场景

在选择工业交换机的时候&#xff0c;很多人会疑惑自己的场景是否适用工业交换机&#xff0c;工业交换机广泛应用于以下场景&#xff0c;大家可以参考了解 1. 工业自动化&#xff1a;工业交换机用于连接各种工业设备&#xff0c;如PLC&#xff08;可编程逻辑控制器&#xff09;、…
阅读更多...
【探索C++】三大特性以及类和对象（包括类的特殊函数成员）

【探索C++】三大特性以及类和对象（包括类的特殊函数成员）

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…
阅读更多...
遇到的问题总结

遇到的问题总结

1、在实验室服务器里运行新项目的时候遇到 conda activate pytorch3_7(我的环境名字) conda install -c anaconda tensorboard (失败 一直堵在"Solving environment" &#xff09; pip install tensorboard
阅读更多...
VS使用Visual Assist添加代码说明信息

VS使用Visual Assist添加代码说明信息

写代码时&#xff0c;我们一般需要在代码的最前面添加一些说明信息&#xff0c;作者的联系方式等等。一些高级的 IDE 工具提供修改代码模板的功能&#xff0c;这样就能够在创建新代码时自动加上版权信息。Visual Studio 虽然没有提供这样的操作界面&#xff0c;但是我们可以通过…
阅读更多...
Cron表达式每周三周五18点执行

Cron表达式每周三周五18点执行

Cron表达式每周三周五18点执行 0 0 18 ? * WED,FRI验证正确性&#xff1a;
阅读更多...
C# Winform编程（5）菜单栏和工具栏

C# Winform编程（5）菜单栏和工具栏

菜单和菜单组件 添加菜单编辑菜单菜单栏和工具栏 添加菜单 将MenuStrip控件拖拽到Form窗体顶部添加菜单 编辑菜单 添加菜单项&#xff0c;编辑菜单属性等功能。 右键单击已添加的菜单项可以弹出右键菜单&#xff1a; 可以设置菜单图标&#xff0c;使能菜单&#xff0c;显示…
阅读更多...
[Python中常用的回归模型算法大全：从线性回归到XGBoost]

[Python中常用的回归模型算法大全：从线性回归到XGBoost]

文章目录 概要保序回归&#xff1a;理论与实践多项式回归&#xff1a;探索数据曲线关系多输出回归的示例 概要 在数据科学和机器学习领域&#xff0c;回归分析是一项关键任务&#xff0c;用于预测连续型变量的数值。除了传统的线性回归模型外&#xff0c;Python提供了丰富多样…
阅读更多...
每周电子W4——电路与电路模型

每周电子W4——电路与电路模型

文章目录 每周电子W4——电路与电路模型电路电路模型电流和电压的参考方向电流的参考方向电压的参考方向 电功率 每周电子W4——电路与电路模型 电路 实际电路&#xff1a;由电工设备和电气器件按预期目的连接构成的电流的通路。 为完成某种预期的目的而设计、安装、运行的&a…
阅读更多...
latex：表格水平宽度调整

latex：表格水平宽度调整

解决方案 结果如下&#xff1a; 源代码如下&#xff1a; \documentclass{article} % \usepackage[utf8]{ctex} \usepackage{multirow} \usepackage{graphicx} \usepackage{booktabs} \usepackage{caption}\begin{document}\captionsetup{font{large}}\begin{table}[] \centeri…
阅读更多...
数据结构 - 7（Map和Set 15000字详解）

数据结构 - 7（Map和Set 15000字详解）

一&#xff1a; 二叉搜索树 1.1 二叉搜索树的概念 概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树: 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所…
阅读更多...
萝卜刀真的太危险了,于是我用Cocos做了一个

萝卜刀真的太危险了,于是我用Cocos做了一个

点击上方亿元程序员关注和★星标 引言 大家好&#xff0c;我是亿元程序员&#xff0c;一位有着8年游戏行业经验的主程。 昨天&#xff0c;我女儿和我说想买一把萝卜刀&#xff0c;众所周知&#xff0c;萝卜刀在潜意识当中是存在一定的危险的&#xff0c;所以我果断拒绝了&…
阅读更多...
Elasticsearch介绍及插件head和kibana下载

Elasticsearch介绍及插件head和kibana下载

目录标题 一、Elasticsearch介绍二、Elasticsearch下载三、Elasticsearch-head四、Elasticsearch-kibana 一、Elasticsearch介绍 Elasticsearch是什么? Elasticsearch 是一个基于Lucene的分布式搜索和分析引擎&#xff0c;ES是elaticsearch简写&#xff0c;Elasticsearch是一…
阅读更多...
Lite-UNet: 轻量且高效的细胞定位模型，轻量化的U-Net

Lite-UNet: 轻量且高效的细胞定位模型，轻量化的U-Net

论文&#xff1a;Lite-UNet: A Lightweight and Efficent Network for Cell Localization Paper Link&#xff1a;Lite-UNet: A Lightweight and Efficent Network for Cell Localization Code&#xff1a; https://github.com/Boli-trainee/Lite-UNet 核心思想&#xff1a;魔…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023