如何在React的axios GET请求中将请求参数设置为可选

axios的params配置本身会自动忽略值为undefined的字段，你只需要在构造参数对象时，把未传入的字段设为undefined，或者提前过滤掉所有空值字段即可，两种方案都可以实现可选参数的需求。

基础实现方案（利用axios原生特性） #

import { useState } from 'react';
import axios from 'axios';

function UserQuery() {
  // 查询参数初始值设为undefined，未赋值时axios会自动跳过该字段
  const [ID, setID] = useState();
  const [Name, setName] = useState();

  const fetchUser = () => {
    axios.get('/user', {
      params: {
        ID,
        Name
      }
    })
    .then(function (response) {
      console.log(response);
    })
  }

  return (
    <div>
      <input 
        placeholder="输入ID" 
        value={ID || ''} 
        onChange={e => setID(e.target.value ? e.target.value : undefined)} 
      />
      <input 
        placeholder="输入姓名" 
        value={Name || ''} 
        onChange={e => setName(e.target.value ? e.target.value : undefined)} 
      />
      <button onClick={fetchUser}>查询</button>
    </div>
  )
}

export default UserQuery;

兼容空值的进阶方案 #

如果需要避免空字符串、null这类无效值被当成参数携带，可以先对参数做一次过滤再传入：

const fetchUser = () => {
  const rawParams = { ID, Name };
  // 过滤掉所有值为undefined、null、空字符串的字段
  const params = Object.fromEntries(
    Object.entries(rawParams).filter(([_, value]) => value != null && value !== '')
  );

  axios.get('/user', { params })
  .then(response => console.log(response))
}

两种方案都能实现你要的效果：

• 仅输入ID时，只携带ID参数
• 同时输入ID和Name时，两个参数都携带
• 未输入任何内容时，不携带任何查询参数，接口返回全部记录

内容的提问来源于stack exchange，提问作者Shruti sharma