前端传参的三种方式实战案例

1、params 传参

这种方式将参数直接拼接在 URL 地址末尾，因此用户可以在浏览器地址栏中直观地看到这些参数。

案例1

地址栏：https://xxxxxxxx/admin/clues/detail?id=558

接口代码：

export function getClueDetail(query: any) {
  return request<clueItem>({
    url: '/clues/detail',
    method: 'get',
    params: query
  })
}

在此类接口中，query 代表接收参数的形参，params 指代传参方式，而 query 即为具体的参数值。系统会自动将这些参数以问号（?）分隔符追加到请求 URL 之后，多个数据项之间使用 & 符号连接。这种机制使得请求参数在地址栏中可见。

案例2

地址栏： http://192.168.7.188:3000/registers/list?name=&mobile=&IDNumber=&page=1&perPage=10000

export function getPeopleList(query) {
  return request({
    url: "/registers/list",
    method: "get",
    params: query,
  });
}

在该接口中，query 包含多个查询参数。

2、data 传参

使用 data 传参时，数据会被放置在请求体（body）中，因此这些参数不会显示在浏览器的地址栏里。

案例3

export function postClueCreate(data: clueItem) {
  return request<clueItem>({
    url: '/clues/create',
    method: 'POST',
    data: data
  })
}

在控制台打印输出时，不仅可以查看 data 传参中的参数，也能看到 params 传参相关的信息。

3、headers 传参

headers 传参方式在实际应用中相对较少使用。

import axios from 'axios'
import store from '@/store'
const myAxios = axios.create({
  // 基地址
  baseURL: 'http://xxxxxx'
})
const getUserInfoAPI = () => {
  return request({
    url: '/my/userinfo'
    // method不写默认就是'get'方式请求
    headers: {
      Authorization: store.state.token
    }
  })
}

案例4 （项目实操案例）

一个接口 同时使用 params和data 这两种传参方式

params 的参数会拼接在地址栏中，而 data 中的参数会拼接在请求体body中，可以在控制台看到二者

接口

export function updatePeople(data) {
  return request({
    url: "/registers/update",
    method: "post",
    // 从data中取出想要的参数，装入params中
    params: {
      id: data.id,
    },
    // data 直接照单全收
    data: data,
  });
}

地址栏：

参数

附：前端传参后端没接到什么原因

前端传参后端没接到可能有多种原因，以下是一些常见的情况：

• 前端传参的方式不正确，例如使用 GET 方法传参时，参数没有放在 URL 中；使用 posT 方法传参时，参数没有放在请求体中。

• 前端传参时参数名称不正确或者参数值为空，这可能会导致后端无法正确解析参数。

• 后端接收参数的方式不正确，例如使用 GET 方法接收参数时，没有正确解析 URL 中的参数；使用 posT 方法接收参数时，没有正确解析请求体中的参数。

• 后端的接口地址不正确，导致前端传参的数据没有正确发送到后端。

• 网络通信问题，例如前端请求被防火墙拦截、网络超时等情况，导致前端传参后端接收失败。

总结

到此这篇关于前端传参的三种方式的文章就介绍到这了,更多相关前端传参方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！