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

在mock中的传参方式:
mock中传参的方式有两个参数,一个是path对象,一个是data对象。
path想当于拼接在url地址上的参数,
data是url后面的参数。
1、get请求
如果url后面有opts的参数,则说明他需要传递参数。要不就不用传递了,直接写个url就好了,不用拼接参数。(请看下图)

图一是接口

图二是调用了这个接口。
这个get请求中拼接了参数,get中参数的拼接是和url拼接在一块。opts中的path属性是用来在url中进行拼接的,path中写入你需要拼接的参数。
实际上mock和axios的方式大致是一样的,他们都是基于promise对象来使用的,他们返回的是一个promise对象,所以可以用.then。then方法中的参
数就是后端返回给咱们的数据。
2、post请求
接口:


3、put传参
他传参的方式同post是一样滴。这里就不赘述了。


axios传参的方式:
在介绍axios传参时需要介绍一种字符串的另一种表达形式---模板字符串
模板字符串就是字符串的另一种表达形式。
用``包裹起来的就是字符串就是模板字符串,如果字符串${id}代表的就是拼接的变量名,这样就不用加连接符了,
下面时实例。

1、get请求

2、post请求

注意data是一个对象哈。
3、delete请求
delete实际上和get请求的传递方式是一样的。

mock和axios常见的传参方式的更多相关文章
- axios中post传参方式
最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...
- jQuery对象初始化的传参方式
jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$(' ... '), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第 ...
- java 传参方式--值传递还是引用传递
java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...
- axios的各种传参方式
axios的各种传参方式 1. params方式 axios({ url: '/users', method: 'get', params: { id: '11111', name: '22222' ...
- axios用post传参,后端无法获取参数问题
最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...
- angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post
1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...
- react中的传参方式
react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...
- Web API中的传参方式
在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...
- Python函数定义及传参方式
主要内容: 1.函数初识 2.函数传参方式 (1)位置参数 (2)默认参数 (3)关键参数 (4)非固定传参 一.函数初识 1. ...
随机推荐
- linux 更改文件所属用户及用户组
在Linux中,创建一个文件时,该文件的拥有者都是创建该文件的用户.该文件用户可以修改该文件的拥有者及用户组,当然root用户可以修改任何文件的拥有者及用户组.在Linux中,对于文件的权限(rw ...
- Ng的数组绑定
tip:数据的定义需要在对应ts中进行,调用在html中 定义数组: ts中 public arr =["111","222","333"] ...
- 针对于ECMA5Script 、ECMAScript6、TypeScript的认识
什么是ECMAScript.什么又是ECMA? Ecma国际(Ecma International)是一家国际性会员制度的信息和电信标准组织.1994年之前,名为欧洲计算机制造商协会(European ...
- Coins POJ - 1742
给出硬币面额及每种硬币的个数,求从1到m能凑出面额的个数. Input 多组数据,每组数据前两个数字为n,m.n表示硬币种类数,m为最大面额,之后前n个数为每种硬币的面额,后n个数为相应每种硬币的个数 ...
- net core WebApi——使用NPOI导入导出操作
目录 前言 NPOI 测试 小结 @ 前言 时间过得好快,在之前升级到3.0之后,就感觉好久没再动过啥东西了,之前有问到Swagger的中文汉化,虽说我觉得这种操作的意义不是太大,也是多少鼓捣了下,其 ...
- php函数fsockopen的使用
函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...
- QCustomplot使用分享(九) 绘制图表-多功能游标
目录 一.概述 二.效果图 三.源码讲解 1.源码结构 2.头文件 3.添加游标 4.监测移动 5.移动游标 6.其他函数 四.测试方式 1.测试工程 2.测试文件 3.测试代码 五.相关文章 六.总 ...
- 【MongoDB详细使用教程】四、python操作MongoDB
目录 1.安装pymongo 2.连接数据库 3.操作数据库 3.1.查 3.2.增 3.3.改 3.4.删 使用第三方库pymongo来实现python对MongoDB的操作 pymongo官方文档 ...
- 介绍Webflux
介绍Webflux 关于WebFlux 我们知道传统的Web框架,比如说:struts2,springmvc等都是基于Servlet API与Servlet容器基础之上运行的,在Servlet3.1之 ...
- 在WPF中使用.NET Core 3.0依赖项注入和服务提供程序
前言 我们都知道.NET Core提供了对依赖项注入的内置支持.我们通常在ASP.NET Core中使用它(从Startup.cs文件中的ConfigureServices方法开始),但是该功能不限于 ...