前端傳參的三種方式實(shí)戰(zhàn)案例

更新時(shí)間：2024年08月03日 10:45:09 作者：發(fā)漸稀

近期公司采用前后端分離的方式開(kāi)發(fā)系統(tǒng),面臨前后端傳值方式的統(tǒng)一約定,該篇文章針對(duì)幾種傳值方式做了匯總,這篇文章主要給大家介紹了關(guān)于前端傳參的三種方式,需要的朋友可以參考下

1、params 傳參

參數(shù)拼接在地址 url 的后面給后臺(tái)；地址欄中可見(jiàn)

案例1

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

接口代碼：

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

對(duì)于這個(gè)接口而言，query是接口被調(diào)用時(shí)接收參數(shù)的形參；params即是傳參方式，而query就是參數(shù)，其會(huì)自動(dòng)拼接在請(qǐng)求地址的 url 后面，以問(wèn)號(hào)分隔，數(shù)據(jù)之間通過(guò)&連接；這樣我們可以直接在地址欄中看到請(qǐng)求的參數(shù)

案例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 中就是查詢(xún)參數(shù)，其中包含了很多個(gè)參數(shù)；

2、data 傳參

使用 data 傳參，其會(huì)把數(shù)據(jù)拼接在請(qǐng)求體里 (body參數(shù))；地址欄中看不到請(qǐng)求參數(shù)

案例3

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

在控制臺(tái)中可以打印出來(lái)（這里不僅可以展示 data傳參中的參數(shù)，也可以展示params傳參中的參數(shù)）

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不寫(xiě)默認(rèn)就是'get'方式請(qǐng)求
    headers: {
      Authorization: store.state.token
    }
  })
}

案例4 （項(xiàng)目實(shí)操案例）

一個(gè)接口同時(shí)使用 params和data 這兩種傳參方式

params的參數(shù)會(huì)拼接在地址欄中，而data中的參數(shù)會(huì)拼接在請(qǐng)求體body中，可以在控制臺(tái)看到二者

接口

export function updatePeople(data) {
  return request({
    url: "/registers/update",
    method: "post",
    // 從data中取出想要的參數(shù)，裝入params中
    params: {
      id: data.id,
    },
    // data 直接照單全收
    data: data,
  });
}

地址欄：

參數(shù)

附：前端傳參后端沒(méi)接到什么原因

前端傳參后端沒(méi)接到可能有多種原因，以下是一些常見(jiàn)的情況：

前端傳參的方式不正確，例如使用 GET 方法傳參時(shí)，參數(shù)沒(méi)有放在 URL 中；使用 posT 方法傳參時(shí)，參數(shù)沒(méi)有放在請(qǐng)求體中。
前端傳參時(shí)參數(shù)名稱(chēng)不正確或者參數(shù)值為空，這可能會(huì)導(dǎo)致后端無(wú)法正確解析參數(shù)。
后端接收參數(shù)的方式不正確，例如使用 GET 方法接收參數(shù)時(shí)，沒(méi)有正確解析 URL 中的參數(shù)；使用 posT 方法接收參數(shù)時(shí)，沒(méi)有正確解析請(qǐng)求體中的參數(shù)。
后端的接口地址不正確，導(dǎo)致前端傳參的數(shù)據(jù)沒(méi)有正確發(fā)送到后端。
網(wǎng)絡(luò)通信問(wèn)題，例如前端請(qǐng)求被防火墻攔截、網(wǎng)絡(luò)超時(shí)等情況，導(dǎo)致前端傳參后端接收失敗。