前端发送请求之参数处理---multipart/form-data与application/x-www-form-urlencoded

Content-Type就是指 HTTP 发送信息至服务器时的内容编码类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。

其实前后端发送请求的方式有 text/plain、application/json、application/x-www-form-urlencoded、
multipart/form-data
等,这版先介绍【multipart/form-data】与【application/x-www-form-urlencoded】。

1、application/x-www-form-urlencoded

前端发送请求,需要对入参做处理

const params = new URLSearchParams();// options为需要传递的参数,如{a: 3, b: 4}Object.keys(options).forEach(key => {params.append(key, options[key]);});

调用请求:

return request({path: `/apis/list`,params: params,headers: {'Content-Type': 'application/x-www-form-urlencoded'},method: 'POST',});

2、multipart/form-data

let formData = new FormData();// options为入参,格式如:{a: 3, b: 4}Object.keys(options).forEach(key => {formData.append(key, options[key]);});

发送请求:

return request({path: `/apis/list`,params: formData,headers: {'Content-Type': 'multipart/form-data'},method: 'POST',});

两种发送请求的方式都是将入参转换:{a:1,b:2} => a=1&b=2,可以在底层采用统一的方式来处理。

/* 对象转化URL({a:1,b:2} => a=1&b=2) */
export const toUrlParam = (obj) => {var url = '';Object.keys(obj).forEach((key) => {url += key + '=' + obj[key] + '&';});if (url && url.length > 0) {url = url.substring(0, url.length - 1);}return url;
};
const instance = axios.create({timeout: 30000, // 超时,401headers: {'X-Requested-With': "XMLHttpRequest"},withCredentials: true
});export const request = ({ path, params = {}, headers = {}, method = 'post' }) => {method = method.toLocaleLowerCase();let url = `${API_URL}${path}`;if (method === 'get') {url += `?${toUrlParam(params)}`;}return instance.request({method,url,data: toUrlParam(params),headers});
};

直接发送请求:

return request({path: `/apis/list`,params: options,method: 'POST',});

谨以此记录两种请求方式,后续会记录剩下的请求方式~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Axie Infinity 之后,Ronin 的潜力何在?

作者:stellafootprint.network 数据来源:Ronin Dashboard 备受欢迎的 Web3 游戏 Pixels 在 2023 年 10 月下旬从 Polygon 迁移到了专为游戏设计的区块链 Ronin。Pixels 此前作为 Polygon 上活跃用户(钱包数量)最多的 Web3 游戏&…

iPhone手机中备忘录如何改变字体颜色

作为一名iPhone用户,我经常使用手机备忘录来记录生活中的点点滴滴。这样,我的大脑就能从繁琐的记忆任务中解脱出来,专注于更重要的事情。 而且,我有一个特别的习惯,那就是使用不同颜色的字体来区分不同的备忘录。这样…

学习黑马vue

项目分析 项目下载地址:vue-admin-template-master: 学习黑马vue 项目下载后没有环境可参考我的篇文章,算是比较详细:vue安装与配置-CSDN博客 安装这两个插件可格式化代码,vscode这个软件是免费的,官网:…

什么是 Spring 框架?

Spring 框架是一个开源的、轻量级的企业级应用框架,用于构建 Java 应用程序。它提供了全面的基础设施支持,以简化企业级应用的开发。Spring 的核心目标是通过促进良好的设计原则和编程习惯来提高 Java 开发人员的效率和系统的可维护性。 Spring 框架的主…

2023-12-14 二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数

二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数 104. 二叉树的最大深度 思想:可以使用迭代法或者递归!使用递归更好,帮助理解递归思路!明确递归三部曲–①确定参数以及返回参数 ②递归结束条件 ③单层逻辑是怎么样…

更改Android Studio的.android和.gradle文件夹默认位置

一、首先关闭Android Studio, 二、目标位置新建文件夹 这一步,为了省去麻烦,我并没有直接在我的目标位置新建文件夹,而是把C盘下的.android和.gradle文件夹整个复制过来,和SDK都在同一目录下,感觉这样可以…

MySQL:从MySQL看主从架构高可用性实现

目录 1 主备延迟 1.1 主备延迟 1.2 主备延迟的来源 1.2.1 主备机性能有差距 1.2.2 备库压力大 1.2.3 大事务 1.3 主备延迟的排查思路 3)查看MySQL状态 2 主备切换策略 2.1 可靠性优先策略 2.2 可用性优先策略 2.3 常见切换技术 从进入互联网时代开始&a…

快速诊断试剂原料的快速诊断——博迈伦生物

快速诊断试剂在医学领域中发挥着至关重要的作用,其原料的选择直接关系到试剂的性能和准确性。在设计和制备快速诊断试剂时,必须仔细考虑原料的选择,以确保其在诊断过程中表现出色。以下是一些常见的快速诊断试剂原料及其特性的概述。 1. 抗体…

class083 动态规划中用观察优化枚举的技巧-下【算法】

class083 动态规划中用观察优化枚举的技巧-下【算法】 算法讲解083【必备】动态规划中用观察优化枚举的技巧-下 code1 1235. 规划兼职工作 // 规划兼职工作 // 你打算利用空闲时间来做兼职工作赚些零花钱,这里有n份兼职工作 // 每份工作预计从startTime[i]开始、e…

Python 字典:dic = {} 和 dic = defaultdict(list)之间的区别

d defaultdict(list) 和 d {} 在Python中代表了两种不同类型的字典初始化方式,它们之间有几个关键的区别: 1、类型 d defaultdict(list):这里使用的是 collections 模块中的 defaultdict 类。它是一个字典的子类,提供了一个默…

基于K-Means的图片聚类算法实战

一. 场景说明 我们通常遇到一个问题,当很多图片放在一个文件夹中,要把这些文件夹中的图片按规律分为几类。当图片比较少时,我们可以手动完成,但是当图片的数量是几千甚至几万时,手动挑选图片的工作量就太大了。 因此&…

git关于ssh我遇到的问题解决链接

新手,第一次用gitee上传程序,花了好几天(有空就弄)才搞定,刚开始弄https,但我的用户名和密码都不知道,网上找的办法都重置不了。下面是我弄ssh时遇到的问题 在gitee设置ssh公钥: G…

GaussDB如何创建和管理视图

GaussDB如何创建和管理视图 一、什么是视图 当用户对数据库中的一张或者多张表的某些字段的组合感兴趣,而又不想每次键入这些查询时,用户就可以定义一个视图,以便解决这个问题。 视图与基本表不同,不是物理上实际存在的&#x…

基于ssm的“游侠”旅游信息管理系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本“游侠”旅游信息管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的…

自动灭火贴哪个牌子好?看懂灭火贴原理应该这么选!

随着大家安全意识的增强,无论是日常生活还是工业生产,都可以看到灭火器的踪影。但是往往在火情中,人们很难第一时间发现危险并及时扑灭,或多或少会造成财产损失,甚至影响到生命安全。近几年,自动灭火贴应运…

第十五章 React使用UI(Ant Design)框架

一、专栏介绍 😆😆 欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、…

SQL Server判断数据库、表、列、视图、存储过程、函数是否存在

一、前言概述 在写一些业务逻辑相对复杂点的存储过程的时候,经常会用到临时表或者数据表作为临时结果的保存。但每次在作表是否存在的判断时,往往想不起完整的SQL写法。因此,记录一些常用的数据库对象是否存在的判断方法,可以达到…

【论文翻译】Learning Deep Features for Discriminative Localization

原文:Learning Deep Features for Discriminative Localization 摘要 在这项工作中,我们重新审视了文献[13]中提出的全局平均池化层,并阐明了它如何明确地使卷积神经网络具有出色的定位能力,尽管该网络是在图像级标签上进行训练的…

Qt/QML编程学习之心得:信号+槽(十三)

Qt设计GUI界面应用程序,类似于Windows的Visual Studio设计界面,最主要的就是消息机制,如果vs下叫MFC机制,那么Qt就叫信号槽机制。MFC采用消息映射机制,每个类都有一个消息映射,与该类有关的消息都出现在该类的消息映射中。类的消息映射把一组消息映射宏组成一个消息映射表…

排序算法:【冒泡排序】、逻辑运算符not用法、解释if not tag:

注意: 1、排序:将一组无序序列,调整为有序的序列。所谓有序,就是说,要么升序要么降序。 2、列表排序:将无序列表变成有序列表。 3、列表这个类里,内置排序方法:sort( )&#xff0…