第一次接手项目,传参方式还有些吃力,因此做一下总结。

首先我们需要会看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常见的传参方式的更多相关文章

  1. axios中post传参方式

    最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...

  2. jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式包括: 1.$(DOMElement) 2.$(' ... '), $('#id'), $('.class') 传入字符串, 这是最常见的形式, 这种传参数经常也传入第 ...

  3. java 传参方式--值传递还是引用传递

    java 传参方式--值传递还是引用传递 参数是按值而不是按引用传递的说明 Java 应用程序有且仅有的一种参数传递机制,即按值传递.写它是为了揭穿普遍存在的一种神话,即认为 Java 应用程序按引用 ...

  4. axios的各种传参方式

    axios的各种传参方式 1. params方式 axios({ url: '/users', method: 'get', params: { id: '11111', name: '22222' ...

  5. axios用post传参,后端无法获取参数问题

    最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...

  6. angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post

    1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...

  7. react中的传参方式

    react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...

  8. Web API中的传参方式

    在Restful风格的WebApi的里面,API服务的增删改查,分别对应着Http Method的Get / Post / Delete /Put,下面简单总结了Get / Post /Delete ...

  9. Python函数定义及传参方式

    主要内容:     1.函数初识     2.函数传参方式        (1)位置参数        (2)默认参数        (3)关键参数        (4)非固定传参 一.函数初识 1. ...

随机推荐

  1. linux 更改文件所属用户及用户组

      在Linux中,创建一个文件时,该文件的拥有者都是创建该文件的用户.该文件用户可以修改该文件的拥有者及用户组,当然root用户可以修改任何文件的拥有者及用户组.在Linux中,对于文件的权限(rw ...

  2. Ng的数组绑定

    tip:数据的定义需要在对应ts中进行,调用在html中 定义数组: ts中 public arr =["111","222","333"] ...

  3. 针对于ECMA5Script 、ECMAScript6、TypeScript的认识

    什么是ECMAScript.什么又是ECMA? Ecma国际(Ecma International)是一家国际性会员制度的信息和电信标准组织.1994年之前,名为欧洲计算机制造商协会(European ...

  4. Coins POJ - 1742

    给出硬币面额及每种硬币的个数,求从1到m能凑出面额的个数. Input 多组数据,每组数据前两个数字为n,m.n表示硬币种类数,m为最大面额,之后前n个数为每种硬币的面额,后n个数为相应每种硬币的个数 ...

  5. net core WebApi——使用NPOI导入导出操作

    目录 前言 NPOI 测试 小结 @ 前言 时间过得好快,在之前升级到3.0之后,就感觉好久没再动过啥东西了,之前有问到Swagger的中文汉化,虽说我觉得这种操作的意义不是太大,也是多少鼓捣了下,其 ...

  6. php函数fsockopen的使用

    函数说明:fsockopen — 打开一个网络连接或者一个Unix套接字连接 语法: resource fsockopen ( string $hostname [, int $port = -1 [ ...

  7. QCustomplot使用分享(九) 绘制图表-多功能游标

    目录 一.概述 二.效果图 三.源码讲解 1.源码结构 2.头文件 3.添加游标 4.监测移动 5.移动游标 6.其他函数 四.测试方式 1.测试工程 2.测试文件 3.测试代码 五.相关文章 六.总 ...

  8. 【MongoDB详细使用教程】四、python操作MongoDB

    目录 1.安装pymongo 2.连接数据库 3.操作数据库 3.1.查 3.2.增 3.3.改 3.4.删 使用第三方库pymongo来实现python对MongoDB的操作 pymongo官方文档 ...

  9. 介绍Webflux

    介绍Webflux 关于WebFlux 我们知道传统的Web框架,比如说:struts2,springmvc等都是基于Servlet API与Servlet容器基础之上运行的,在Servlet3.1之 ...

  10. 在WPF中使用.NET Core 3.0依赖项注入和服务提供程序

    前言 我们都知道.NET Core提供了对依赖项注入的内置支持.我们通常在ASP.NET Core中使用它(从Startup.cs文件中的ConfigureServices方法开始),但是该功能不限于 ...