1、params 傳參

參數(shù)拼接在地址 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是接口被調(diào)用時接收參數(shù)的形參；params即是傳參方式，而query就是參數(shù)，其會自動拼接在請求地址的 url 后面，以問號分隔，數(shù)據(jù)之間通過&連接；這樣我們可以直接在地址欄中看到請求的參數(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 中就是查詢參數(shù)，其中包含了很多個參數(shù)；

2、data 傳參

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

案例3

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

在控制臺中可以打印出來（這里不僅可以展示 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不寫默認就是'get'方式請求
    headers: {
      Authorization: store.state.token
    }
  })
}

案例4 （項目實操案例）

一個接口 同時使用 params和data 這兩種傳參方式

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

接口

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

地址欄：

參數(shù)

附：前端傳參后端沒接到什么原因

前端傳參后端沒接到可能有多種原因，以下是一些常見的情況：

• 前端傳參的方式不正確，例如使用 GET 方法傳參時，參數(shù)沒有放在 URL 中；使用 posT 方法傳參時，參數(shù)沒有放在請求體中。

• 前端傳參時參數(shù)名稱不正確或者參數(shù)值為空，這可能會導致后端無法正確解析參數(shù)。

• 后端接收參數(shù)的方式不正確，例如使用 GET 方法接收參數(shù)時，沒有正確解析 URL 中的參數(shù)；使用 posT 方法接收參數(shù)時，沒有正確解析請求體中的參數(shù)。

• 后端的接口地址不正確，導致前端傳參的數(shù)據(jù)沒有正確發(fā)送到后端。

• 網(wǎng)絡通信問題，例如前端請求被防火墻攔截、網(wǎng)絡超時等情況，導致前端傳參后端接收失敗。

總結(jié) 

到此這篇關(guān)于前端傳參的三種方式的文章就介紹到這了,更多相關(guān)前端傳參方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論