axios请求中以params或body形式传递参数的区别浅析

　　一、前言：

　　前端发送请求最常⽤的是get请求还有post请求，get请求只能传query参数，query参数都是拼在请求地址上的，post可以传body和query两种形；我在开发的时候通常使用的是Axios第三方库进行网络请求，所以这里主要是将Axios请求时query与body传递参数的区别

　　二、Axios post

　　当content-type为application/x-www-form-urlencoded时

　　1. axios 中post请求Content-Type默认为application/json，我们传递参数的时候，query里面的参数（简称对象，通过“{}”或者“new Object“创建）会被以&的方式凭借到请求地址的后面（get请求也是一样的）

　　params参数如下：

　　2.data里面的参数（简单的对象，通过“{}”或者“new Object”创建的），会以Form Data的形式存在，但是Form Data里面把我们传进去的整体当成了一个key值，没有value

　　当content-type为application/json时：

　　post请求当Content-Type设置为application/json;时,query（简单对象）里面的参数仍然会被拼接到请求连接后面，但是data（简单对象）里面的参数放到Request Payload中

　　三、代码举例说明

　　get请求

　　axios({

　　method: 'GET',

　　url: 'xxxxx',

　　params: param,

　　})

　　/or get请求没有请求体参数一说

　　axios({

　　method: 'GET',

　　url: '/xxx?message=' + msg,

　　})

　　post请求

　　1.body参数

　　/* 编辑项⽬列表 */

　　export function editProjectList(params) {

　　return request({

　　url: 'xxxxx....',

　　method: 'post',

　　data: params// data就是body参数

　　});

　　}

　　2.params参数

　　/* 增加客户列表 */

　　export function addClientList(params) {

　　return request({

　　url: '....xxxx',

　　method: 'post',

　　params: params// params就是query参数

　　});

　　}

　　export function addClientList(params) {

　　return request({

　　url: '....xxxx',

　　method: 'post',

　　params: {params}// params就是query参数

　　});

　　}

　　export function addClientList(params) {

　　return request({

　　url: '....xxxx',

　　method: 'post',

　　params: {

　　info:'heihei'

　　}// params就是query参数

　　});

　　}

　　四、总结

　　到此这篇关于axios请求中以params或body形式传递参数的区别的文章就介绍到这了,更多相关axios请求传递参数的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: