axios链接带参数_axios常见传参方式

1:get请求

一般发送请求是这么写

axios.get('/user?id=12345&name=user')

.then(function (res) {

console.log(res);

}).catch(function (err) {

console.log(err);

});

但是为了方便全局统一调用封装的axios

axios.get('/user', { //params参数必写 , 如果没有参数传{}也可以

params: {

id: 12345，

name: user

}

})

.then(function (res) {

console.log(res);

})

.catch(function (err) {

console.log(err);

});

2.post/put/patch请求

(1) 传参格式为 formData

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'multipart/form-data')

var formData=new FormData();

formData.append('user',123456);

formData.append('pass',12345678);

axios.post("/notice",formData)

.then((res) => {return res})

.catch((err) => {return err})

(2) 传参格式为 query 形式

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'application/x-www-form-urlencoded')

第一种情况：使用$qs.stringify

import Qs from 'qs' //引入方式

Vue.prototype.$qs = Qs //全局加载

this.$qs.stringify(data); //使用方式

this.$qs.parse(data); //使用方式

var readyData=this.$qs.stringify({

id:1234,

name:user

});

axios.post("/notice",readyData)

.then((res) => {return res})

.catch((err) => {return err})

第二种情况：使用URLSearchParams

在浏览器中，您可以使用URLSearchParams API，如下所示：

var params = new URLSearchParams();

params.append('param1', 'value1');

params.append('param2', 'value2');

axios.post('/foo', params);

注意：所有浏览器都不支持URLSearchParams，但是有一个polyfill可用(确保polyfill全局环境)。

(3) 传参格式为 raw (JSON格式)

第一种情况： axios将JavaScript对象序列化为JSON

(全局请求头:'Content-Type'= 'application/x-www-form-urlencoded')

(request的Header:'Content-Type'= 'application/json;charset=UTF-8')

var readyData={

id:1234,

name:user

};

axios.post("/notice",readyData)

.then((res) => {return res})

.catch((err) => {return err})

第二种情况：

(全局请求头:‘Content-Type'= 'application/json;charset=UTF-8')

(request的Header:‘Content-Type'= 'application/json;charset=UTF-8')

var readyData=JSON.stringify({

id:1234,

name:user

});

axios.post("/notice",readyData)

.then((res) => {return res})

.catch((err) => {return err})

mock和axios常见的传参方式

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

axios中post传参方式

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

jQuery对象初始化的传参方式

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

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

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

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(

Web API中的传参方式

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

Python函数定义及传参方式

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

$router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别

一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

随机推荐

LightOj 1289 - LCM from 1 to n(LCM + 素数)

题目链接:http://lightoj.com/volume_showproblem.php?problem=1289 题意:求LCM(1, 2, 3, ... , n)%(1<<32), ...

Solr5之Schema&period;xml详解

schema.xml 是用来定义索引数据中的域的,包括域名称,域类型,域是否索引,是否分词,是否存储,是否标准化即 Norms ,是否存储项向量等等. schema.xml 配置文件的根元素就是 sc ...

4&period;python中的用户交互

学习完如何写'hello world'之后,我们还是不太满意,因为这样代码就写死了,以后运行的时候都只打印一局固定的话而已. 但是,我想在程序运行后,自己手动输入内容怎么办,此时就要学习如何使用用户交 ...

XoftSpy 4&period;13的注册算法分析

[标题]XoftSpy 4.13的注册算法分析 [作者]forever[RCT] [语言]VC [工具]ida4.6,ollydbg1.1 [正文]       这个软件的算法很简单,正好拿来做逆向分 ...

think in coding

,想想除了技术还有什么? 你假设形而下的去纠结技术.仅仅会变成技术的傀儡.他们仅仅是一种表达的方式? 希望你能够形而上的去看待技术,技术千变万化,但都是为了解决这个问题的方式. 请问问自己,自己问题是 ...

CentOS 7 用firewall-cmd来开放端口

2.CentOS 7 用firewall-cmd来开放端口 如: firewall-cmd --permanent --add-port=3306/tcp 重新加载 firewall-cmd --re ...

python3接收、解析邮件

邮件接收 python3可以使用poplib.POP3进行邮件接收,具体如下: import poplib from email.parser import Parser def get_email( ...

C&plus;&plus;拷贝构造函数的调用时机

一.拷贝构造函数调用的时机 ​ 当以拷贝的方式初始化对象时会调用拷贝构造函数,这里需要注意两个关键点,分别是以拷贝的方式和初始化对象 1. 初始化对象 初始化对象是指,为对象分配内存后第一次向内存中填 ...

static 关键字介绍

大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 static 大显身手的时候了!! Java 中 ...

HUE配置文件hue&period;ini 的Spark模块详解(图文详解)(分HA集群和HA集群)

不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...