vue 拦截器

embedded/2024/12/22 23:00:00/

拦截器——main.js中,可以编写

Axios.interceptors.request.use()来拦截所有的请求,对请求做相应护理后再放行搭配后端,这也是全局的,每个请求中无需自己处理

在main.js中配置

javascript">Axios.defaults.baseURL='http://127.0.0.1:8088';
javascript">import qs from 'querystring';

拦截器代码:

javascript">Axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么if(config.method==="post"||config.method=="put"){config.data=qs.stringify(config.data);}return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});

代码解释:

1. 设置拦截器
Axios.interceptors.request.use: 这个方法用于向 Axios 实例添加一个请求拦截器。use 方法接受两个函数作为参数:
第一个函数 在请求发送之前执行,允许你修改请求的配置。
第二个函数 处理请求配置过程中的任何错误。

2. 请求配置函数
function (config): 这个函数在请求发送之前被调用。config 对象包含有关请求的信息,比如 URL、方法、头部和数据等。

在这个函数内:

if (config.method === "post" || config.method === "put"): 这个条件检查请求的方法是否是 POST 或 PUT。这两种方法通常用于向服务器发送数据。

config.data = qs.stringify(config.data);: 如果条件为真(即请求方法是 POST 或 PUT),这一行代码将请求体(config.data)从对象转换为 URL 编码的字符串格式。qs.stringify 是 qs 库中的一个工具,用于执行这种转换。如果服务器期望的数据格式是 application/x-www-form-urlencoded,这一步是必要的。

3. 返回配置
return config;: 在修改完 config 对象后,返回它。这使得 Axios 能够使用更新后的配置来发送请求。

4. 错误处理函数
function (error): 如果在配置请求时出现错误,这个函数会被调用。

return Promise.reject(error);: 这将返回一个被拒绝的 Promise,并携带错误。这确保了错误能够被传播,以便你可以在 .catch 块或其他错误处理机制中处理它。
总结
目的: 这个拦截器在 POST 和 PUT 请求时,将请求数据转换为 URL 编码的字符串格式,这是如果服务器期望这种格式的数据时非常有用的。
用法: 通常在你需要将数据格式化为特定的内容类型(如 application/x-www-form-urlencoded)时使用这种设置。
示例
假设你有以下的 POST 请求:

javascript">axios.post('/submit', { key: 'value' });


在拦截器的作用下,qs.stringify 会将 { key: 'value' } 转换为 key=value,这个编码后的字符串将被作为请求体发送。

这种处理方式对于服务器期待表单编码的数据(而不是 JSON)时特别重要。

在Home.vue中定义

javascript">export default {mounted() {console.log("渲染完成");this.$axios.put('/book',{id: '8',name: '红楼梦',author: '曹雪芹',}).then(function(response) {console.log(response);}).catch(function(error) {console.log(error);});}


http://www.ppmy.cn/embedded/97357.html

相关文章

前端读取response.headers异常:Cannot read properties of undefined (reading ‘split‘)

[TOC](前端读取response.headers异常:Cannot read properties of undefined (reading ‘split’) ) 前端读取response.headers异常 Cannot read properties of undefined (reading ‘split’) TypeError: Cannot read properties of undefined (reading ‘split’) 报错解释&a…

DHT11温湿度传感器详解(STM32)

目录 一、介绍 二、传感器原理 1.原理图 2.工作时序 3.起始信号与响应信号 4.读数据时序 5.DHT11数据格式 三、程序设计 main.c文件 dht11.h文件 dht11.c文件 四、实验效果展示 五、资料获取 项目分享 一、介绍 DHT11是一款含有已校准数字信号输出的温湿度复合传感器&…

Android常见的界面布局

目录 ​前言 1.线性布局LinearLayout 2.相对布局RelativeLayout 3.表格布局TableLayout 4.网格布局GridLayout 实现一个计算器界面 改Button按钮颜色 5.帧布局FrameLayout 前言 在Android应用程序中,界面是由布局和控件组成的。控件是功能单元,负…

【Python学习-UI界面】PyQt5 小部件14-QDock 子窗口

可停靠窗口是一个子窗口,可以保持浮动状态或附加到主窗口的指定位置。 QMainWindow类的主窗口对象保留了一块区域供可停靠窗口使用。该区域位于中央窗口部件周围。 可停靠窗口可以在主窗口内移动,也可以被取消停靠并由用户移动到新的区域。 样式如下: …

八种排序算法(C语言)

归并排序(递归与非递归实现,C语言)-CSDN博客 快速排序(三种方法,非递归快排,C语言)-CSDN博客 堆排序(C语言)-CSDN博客 选择排序(C语言)以及选择排序优化-CSDN博客 冒泡排序(C语言)-CSDN博客 直接插入排序(C语言)-CSDN博客 希尔排序( 缩小增量排序 )(C语言)-CSDN博客 计数…

vue前端可以完整的显示编辑子级部门,用户管理可以为用户分配角色和部门?

用户和角色是一对多的关系用户和部门是多对多得关系<template><div class="s"><!-- 操作按钮 --><div class="shang"><el-input v-model="searchText" placeholder="请输入搜索关键词" style="width:…

uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数

1、App端跳转微信小程序&#xff08;注意id一定是小程序的原始ID&#xff0c;在小程序后台设置-基本设置里可以看到&#xff09; 注意&#xff1a;与微信小程序跳转微信小程序不同&#xff0c;App端不支持 uni.navigateToMiniProgram&#xff0c;App平台打开微信小程序&#x…

MATLAB 手动实现体素中心点采样抽稀法(72)

. 往期文章回顾 MATLAB 自定义体素中心点采样抽稀法(72) 一、算法简介二、算法实现1.代码2.效果总结一、算法简介 下面是手动实现的体素采样法,用于对点云数据抽稀,减少点云数量,具体的方法就是建立空间三维体素,每个内部存在点云的体素,选择体素中心点保留,最终得到…