vue|axios发送post请求详解

news2024/11/18 17:44:36

axios发送Post请求

首先我们要知道发送一个请求体的时候我们要明确发送的类型是什么,常见的类型有三种

  • form-data
  • application/json
  • application/x-www-form-urlencoded

以上三种类型是进行数据传输的数据类型,我们知道在js代码中的对象都不是以上的三种形式,但是要进行数据传输必须将js对象转换为以上的三种格式之一,可是我刚接触axios发送请求的时候,有时候却可以直接传递一个js对象,就很疑惑,今天终于弄懂了,其实axios在底层帮我们做了转换,如果传递一个js对象,会默认将js对象转换为json对象,具体的流程如下

在这里插入图片描述

对应的就有三种方式发送axios

首先介绍数据类型的转换

  • application/json

    该方式可以直接传一个js,或者一个json对象,

    js对象转换为json的方法JSON.stringfy(obj)

  • form-data

// 该方法是一个Web API
let data = new FormData()
data.append('age', '34')
data.append('name', 'peter')
  • application/x-www-form-urlencoded
// 两种方式
// 1、URLSearchParams();
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
// 2、qs,QS是node
import qs from 'Qs'
const data = qs.stringify({name:'zhangsan'}))

数据类型转换完了就可以发送请求了

axios.post('/api',data)

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

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

相关文章

react实现路由跳转

react通过路由实现页面跳转&#xff1a; ​ 函数式路由(withRouter)使用原生js方法实现路由功能。 ​ eg&#xff1a;export default withRouter(Home) Home是组件名称。 示例&#xff1a;class Home extends Component{<button onClick{this.goForward}>下一级</bu…

猿创征文|【C++游戏引擎Easy2D】炫酷动画来这学,位移动画构造函数让节点执行动画

&#x1f9db;‍♂️iecne个人主页&#xff1a;&#xff1a;iecne的学习日志 &#x1f4a1;每天关注iecne的作品&#xff0c;一起进步 &#x1f4aa;学C必看iecne 本文专栏&#xff1a;【C游戏引擎】. &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; ✨前…

from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ...

跨源资源请求问题解决方案 问题描述&#xff1a;当我们在vsCode中使用 open in brower插件打开html文件文件时&#xff0c;就会报错 xxx已被CORS策略阻止&#xff0c;引入的资源还会失效。 解决办法1 :Live Server插件 在vsCode的插件市场中搜索并安装Live Server插件&#x…

Axios

Axios是Ajax的一个框架&#xff0c;简化Ajax操作 一、基本操作 Axios执行Ajax的操作&#xff1a; 1. 添加axios的js文件 <script language"JavaScript" src"script/axios.min.js"></script> 2.1 客户端向服务端异步发送普通参数值 格式&am…

vue-router报错: uncaught error during route navigation

bug场景&#xff1a; H5项目中,浏览器流程走的通,ios流程走得通,安卓机有的可以有的不行 报错信息&#xff1a; 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 例如&#xff1a;数据传输过程中数据不时出现丢失的情况&#xff0c;偶尔会丢失一部分数据 APP 中接收数…

尚融宝06-ECMAScript基本介绍和使用

目录 一、ECMAScript 1、ECMA 2、ECMAScript 3、什么是 ECMA-262 4、ECMA-262 历史 5、ECMAScript 和 JavaScript 的关系 二、基本语法 1、let声明变量 2、const声明常量 3、解构赋值 4、模板字符串 5、声明对象简写 6、定义方法简写 7、参数的默认值 8、对象拓…

less变量

Less变量一、Less简介二、Less中的变量三、less外部引入一、Less简介 1.Less是一门css的预处理语言&#xff0c;less是一个css的增强版&#xff0c;通过less可以编写更少的代码实现更强大的样式。 变量名以两条短横线命名 例如&#xff1a; --color&#xff1a;red 2.Less特…

vue的created函数中方法执行的顺序设置方法

1.vue的created钩子函数中&#xff0c;方法的执行顺序 1.1情景&#xff1a;vue框架中通常在created钩子函数里执行访问数据库的方法&#xff0c;然后返回数据给前端&#xff0c;前端data中定义全局变量接收数据 1.2误区&#xff1a;我们可能会思考按照自己设定好的逻辑走&…

使用uni-app的uni.chooseImage获取的图片路径,存储到数据库中,无法在前端展示该路径的图片

html,js,uni-app, 首先我在uni-app中使用如下方法添加图片 uni.chooseImage({count: 1, //count: 6, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: [album], //从相册选择success: function(res) {console.log(…

【vue2】vue2中的性能优化(持续更新中)

⭐ v-for 遍历避免同时使用 v-if ⭐ v-for 中的key绑定唯一的值 ⭐ v-show与v-if对性能的影响 ⭐ 妙用计算属性 ⭐ 使用防抖与节流控制发送频率 ⭐ 路由守卫处理请求避免重复发送请求 ⭐ 使用第三方UI库的引入方式 【前言】 该系列是博主在使用vue2开发项目中常用上的一…

JavaScript ,18种常用数组方法,快来看看你会吗?

前言 众所周知&#xff0c;向后端请求数据&#xff0c;处理数据是前端工程师必备的技能&#xff0c;从后端请求回来的数据往往是数组的形式返回到前端&#xff0c;因此数组处理方法的重要性可想而知&#xff1b;数组的处理方法在MDN文档上很多&#xff0c;很多朋友在学习时往往…

vue配置代理服务器proxy

一、跨域。 跨域本质是浏览器基于同源策略的一种安全手段 所谓同源&#xff08;即指在同一个域&#xff09;具有以下三个相同点 协议相同&#xff08;protocol&#xff09;主机相同&#xff08;host&#xff09;端口相同&#xff08;port&#xff09; 非同源请求&#xff0c…

vue集成海康h5player实现播放

文章目录前言准备工作视频demo官方文档官方工具开源工具开始开发效果问题点前言 本篇章只针对官方提供个h5player工具&#xff0c;做播放和分屏demo。 当然本篇章也是针对已经接触了海康视频对接的开发者。 准备工作 视频demo 官方文档 API https://open.hikvision.com/d…

Not allowed to load local resource: file:///,浏览器禁止访问浏览器图片,文件解决方法

Not allowed to load local resource: file… 错误出现原因&#xff1a;浏览器出于安全考虑禁止直接读取本机文件(链接以file:///开头)&#xff0c; 解决办法&#xff1a; 创建一个web服务器&#xff0c;将文件放在这个服务器里&#xff0c;让文件有一个在线地址&#xff08…

【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f310; 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

推荐几个优秀的echarts 图表网站,让你轻松搞定全部报表

1.PPChart - 让图表更简单让图表更简单。PPChart 提供 Echarts 收录、图表制作等服务http://ppchart.com/#/ 2.https://madeapie.com/#/echarts图表制作&#xff0c;Make A Pie&#xff0c;Made A Pie&#xff0c;echarts案例分享&#xff0c;echarts教程分享https://madeapie…

PHP连接数据库MySQL打造xxx管理系统,实现简单的增删改查功能

目录 前言 概述 内容 创建数据库表 实现列表 新增用户 删除用户 编辑用户 前言 最近刚学完PHP和Mysql,历时半个多月时间完成了这样一个简单的算是人员管理系统吧&#xff0c;为了加深印象总结一下&#xff0c;还有很多不足之处&#xff0c;希望大家多多指正&#xff0c;一…

vue点击变色

vue点击一个遍历后元素改变其颜色的方法&#xff0c;有两种情况&#xff0c;第一种是点击单行元素变色&#xff0c;点击另一行元素时&#xff0c;原来变色的元素变回原来的颜色&#xff0c;始终只有一行元素是变色的&#xff0c;第二种情况是点击后永久变色&#xff0c;点击其他…

手把手教你部署前端项目

手把手教你部署前端项目 1.1 用Vue-cli构建简易前端项目 1.1.1 安装 Vue CLI 包 打开命令行工具&#xff0c;执行下列命令来安装 Vue CLI 包&#xff1a; npm install -g vue/cli可以用下面的命令查看是否安装成功&#xff1a; vue --version1.1.2 创建一个项目 新建一个…

背景图片相关应用-铺满,自适应

1.首先了解一下背景相关属性 background-color&#xff1a; 颜色。 background-position&#xff1a; 位置。 数值&#xff0c;或者top,right,bottom,left等&#xff0c;center&#xff1a;距离页面左边的定位&#xff0c;0px&#xff1a;距离页面上面的定位 background-si…