axios的各种传参方式

1、 params方式

axios({

url: '/users',

method: 'get',

params: {

id: '11111',

name: '22222'

}

})

请求地址:/users?id=11111&name=22222

请求体:无

注:get请求是没有请求体的,所以get请求只能使用params传参。

2、 data方式

(1)application/x-www-form-urlencoded(表单方式)

axios({

url: '/users',

method: 'post',

data: qs.stringify({

id: '11111',

name: '22222'

})

})

请求地址:/users

请求体:id=11111&name=22222

(2)application/json(JSON方式

axios({

url: '/users',

method: 'post',

data: {

id: '11111',

name: '22222'

}

})

请求地址:/users

请求体:{"id":"11111","name":"22222"}

(3)multipart/form-data(文件方式

const formData = new FormData()

formData.append('id', '11111')

formData.append('name', '22222')

formData.append('file', 此处是<input type='file'>的value)

axios({

url: '/users/upload',

method: 'post',

headers: { 'Content-Type': 'multipart/form-data' },

data: formData

})

请求地址:/users

请求体:

-----------------------------2024497587069

Content-Disposition: form-data; name="id"

11111

-----------------------------2024497587069

Content-Disposition: form-data; name="name"

22222

-----------------------------2024497587069

Content-Disposition: form-data; name="file"; filename="2019年前端资源估算.xls"

Content-Type: application/vnd.ms-excel

ÐÏࡱá

axios的各种传参方式的更多相关文章

  1. PHP四种传参方式

    test1界面: <html> <head> <title>testPHP</title> <meta http-equiv = "co ...

  2. python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释

    ########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...

  3. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  4. vue param和query两种传参方式

    1.传参方式 query传参方式 this.$router.push({ path: "/home", query: {code:"123"} }) param ...

  5. 浅谈C++三种传参方式

    浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...

  6. Mybatis的几种传参方式,你了解吗?

    持续原创输出,点击上方蓝字关注我 目录 前言 单个参数 多个参数 使用索引[不推荐] 使用@Param 使用Map POJO[推荐] List传参 数组传参 总结 前言 前几天恰好面试一个应届生,问了 ...

  7. mock和axios常见的传参方式

    第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...

  8. vector作为参数的三种传参方式

    c++中常用的vector容器作为参数时,有三种传参方式,分别如下(为说明问题,用二维vector): function1(std::vector<std::vector<int> ...

  9. vue的三种传参方式

    <template> <div> <router-link :to="{'name':'x',params:{'type':'users'}}"> ...

随机推荐

  1. 自己动手搭建经典的3层 Asp.Net MVC

    1:IBaseDAL using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expr ...

  2. 斗鱼刷弹幕js代码

    对于一个网络喷子(like me)来说,喷人必须高效. var script=document.createElement("script"); script.type=" ...

  3. JavaScript调用百度地图

    在网站开发过程中,经常会调用到地图,百度地图提供Web开发.Android开发.iOS开发API及SDK,百度地图JavaScript API可帮助您在网站中构建功能丰富.交互性强的地图应用,本篇博客 ...

  4. Android Studio 3.5+ 使用androidx的recyclerView

    一 File->project structure->Dependencies: 点击All Dependencies处的加号,选择Library Dependency: 在step1处输 ...

  5. 【Linux】扩展阿里云数据盘分区和文件系统

    扩容云盘只是扩大存储容量,不会扩容文件系统 一.准备工作 在扩展数据盘扩展分区和文件系统前,请提前完成以下工作. 创建快照以备份数据,防止操作失误导致数据丢失. 通过ECS控制台或者API扩容云盘容量 ...

  6. 怎样解决非管理员账户添加Notepad++右键菜单的批处理的问题?

    bat脚本如下: @echo off color 1e title 将Notepad++增加到右键菜单(或者去关联) goto :menu :menu cls echo. echo. 1 将Notep ...

  7. 【IDE_IntelliJ IDEA】idea中设置类和方法的注释模板

    参考博文:idea生成类注释和方法注释的正确方法

  8. 其他综合-CentOS 7 命令行显示优化

    CentOS 7 命令行显示优化 1.实验描述 通过 CentOS 7.6 的显示优化,为实现命令行显示提供良好视觉体验. [基于此文章的环境]点我快速打开文章 2.实验环境 使用软件的版本:VMwa ...

  9. vue中webpack的配置理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  10. Go语言goroutine调度器初始化(12)

    本文是<Go语言调度器源代码情景分析>系列的第12篇,也是第二章的第2小节. 本章将以下面这个简单的Hello World程序为例,通过跟踪其从启动到退出这一完整的运行流程来分析Go语言调 ...