インターフェイスのさまざまなデータ型の違いと、フロントエンド (react+TS) がパス リクエスト、ボディ リクエスト、またはクエリ リクエスト タイプのインターフェイスを処理する方法

まず、リクエスト データ タイプの違いについて説明します。
multipart/form-data: ファイルまたはキーと値のペアをアップロードでき、最終的にメッセージに変換されます。
x-www-form-urlencoded: キーと値のペアのみをアップロードでき、キーと値のペアは & 間隔で区切られます。
Raw は任意の形式の入力パラメータに対応し、テキスト、json、xml、html などの任意の形式の [テキスト] をアップロードできます。

1.パスリクエスト型インターフェース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. クエリリクエスト型インターフェース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. ボディリクエスト型APIインターフェースの処理方法
：

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

1) すべてのパラメータをリストします。{}
2) オブジェクトはすべてのパラメータ名をラップし、演算子...オブジェクトを展開します
。 3) 組み合わせとマッチング

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

注: 要求されたデータ型が multipart/form-data の場合、ビジネス処理には formdata を使用する必要があります。