React使用Axios调用比特币API获取BTC价格前端报symbol参数为空问题

错误根因 #

• axios传参格式错误：axios.get()的第二个参数是请求配置对象，不能直接传递业务参数，直接传入symbol对象的写法不会将参数拼接到请求URL上，导致后端无法识别参数，返回symbol为空的报错
• 类名大小写不匹配：定义的类名为bitconService，实例化时使用的是new BitconService()，大小写不一致会触发引用错误
• 回调逻辑错误：then(toast.success("aranıyor"))的写法会在请求发起时同步执行toast，不会等待请求返回，属于错误的回调写法

修复方案 #

1. 修正service.js代码 #

统一类名命名规范，调整axios传参格式：

// 类名统一使用大驼峰规范，避免大小写错误
export default class BitcoinService {
  getBitcoin(queryParams){
    // get请求参数需放在配置对象的params字段中，axios会自动将参数拼接到URL后
    return axios.get("http://localhost:8080/api/btc/avgprice", {
      params: queryParams
    })
  }
}

2. 修正bitcon.js中的调用逻辑 #

匹配类名，修正回调写法：

export default function Bitcoin() {
  const initialValues = { symbol: "BTCUSDT" };
  const schema = Yup.object({
    symbol: Yup.string().required("sembol zorunlu")
  })

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={schema}
      onSubmit={(values) => {
        // 类名和service中定义的保持一致
        const bitcoinService = new BitcoinService();
        bitcoinService.getBitcoin(values)
          .then(res => {
            toast.success("查询成功")
            // 此处可以添加处理返回的BTC价格的业务逻辑
          })
          .catch(err => {
            toast.error("查询失败：" + err.message)
          })
      }}
    >
      <Form className="ui Form">
        <BtcTextInput name="symbol" placeholder="coin name"></BtcTextInput>
        <Button color="green" type="submit">Ekle</Button>
      </Form>
    </Formik>
  )
}

修复后请求会自动携带symbol参数，后端即可正常接收参数返回价格数据。

内容的提问来源于stack exchange，提问作者Furkan Özmen