接口不同数据类型的区别及前端(react+TS)对于path请求、body请求或query请求类型接口的处理方式

首先谈下请求数据类型的区别:
multipart/form-data:可以上传文件或者键值对,最后都会转化为一条消息。
x-www-form-urlencoded:只能上传键值对,而且键值对都是通过&间隔分开的。
raw对应的是入参是任意格式的可以上传任意格式的【文本】,可以上传text、json、xml、html等。

1.path请求类型的处理方式
接口api:

import request from '@/utils/request';

//查询气象站历史温度
export interface MeteorologicalInquiryParams {
  deviceId: String;
  begin?: Number;//?代表可选
  end?: Number;
}
export const getWeatherInfoHistory = ({ deviceId, begin, end }: MeteorologicalInquiryParams) => {
  return request(
    `/api-telematics-pc/v1/agriconditionmonitor/getWeatherInfoHistory/${deviceId}/${begin}/${end}`,
    {
      method: 'get'
    }
  );
};

业务处理:

import { getWeatherInfoHistory } from './service';
import type { MeteorologicalInquiryParams } from './service';

  useEffect(() => {
    if (startdate && enddate) {
      let params: MeteorologicalInquiryParams = {
        deviceId: deviceid,
        begin: Number(startdate),
        end: Number(enddate)
      };
      getWeatherInfoHistory(params).then((res) => {
           .......
      });
    }
  }, [daysrange, startdate, enddate]);

2.query请求类型的处理方式
接口api:
在这里插入图片描述

import request from '@/utils/request';

//获取设备类型
export const getCategoryMenuInfo = (params: any) => {
  return request(`/api-telematics-pc/v1/farmdevicemanager/getCategoryMenuInfo`, {
    method: 'get',
    params
  });
};

业务处理:需要几个参数列几个

let parentCategoryName='农情设备'
let result = await getCategoryMenuInfo({ parentCategoryName});

3.body请求类型处理方式
api接口:

//新增当前农情设备信息
export const addDeviceInfo = (body: any) => {
  return request(`/api-telematics-pc/v1/farmdevicemanager/addDeviceInfo`, {
    method: 'post',
    body
  });
};

1)参数{}全部列出
2)某个对象包裹所有参数名字,展开运算符…object
3)组合搭配

addDeviceInfo({
          companyId,
          farmCode,
          categoryName,
          deviceName,
          id,
          imageUrls,
          landCode,
          latitude,
          longitude,
          serialNum,
          statusValue,
          modelNum,
          parentId,
          producer
        }).then((res) => {}

注意:若请求数据类型为multipart/form-data,业务处理时需用formdata进行包裹。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定位算法工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值