react17关于接口的封装和调用(提高代码可读性！)

        近期在做一个公司的仿真类型的产品设计，其中前端用到的是react框架编写，由于产品对代码的可读性有很高的要求，所以我尝试封装一下接口，下面我来详细说说。

        首先我创建一个hoots.ts文件，用来封装后端编写的接口，接收传过来的的数据集，话不多说直接上代码。

export function infoAirshipform(page?): Promise<{ data; total?: number }> {
  return request(`http://localhost:8080/airship/selectAllAirship`, {
    method: 'GET',
	query: { page: page },
  });
}

export function updateAirshipform(data: AirshipInfo, id?: number) {
	return request(`http://localhost:8080/airship/updateAirship`, {
	  method: 'POST',
	  content: data,
	});
  }

  export function getAirshipform(asId?: number): Promise<{ data: AirshipInfo[] }> {
	return request(`http://localhost:8080/airship/selectAirshipById/${asId}`, {
	  method: 'GET',
	});
  }

  export function addAirshipform(data: AirshipInfo) {
	return request(`http://localhost:8080/airship/insertAirship`, {
	  method: 'POST',
	  content: data,
	});
  }

  export function deleteAirshipform(asId?: number) {
	return request(`http://localhost:8080/airship/deleteAirshipById/${asId}`, {
	  method: 'DELETE',
	});
  }

  export function selectPayloadByCodesform(code: any[]): Promise<{ data: Payload[] }>{
	return request(`http://localhost:8080/payload/selectPayloadByCodes`,{
		method: 'POST',
		body: JSON.stringify(code),
		headers: {
			'Content-Type': 'application/json'
		}
	})
  }

        这里我使用function方法来接后端接口的requestBody,方法名里面包含参数，参数可自定义，具体method定义什么类型，要看后端接口的定义了，对应关系下篇文章我会讲讲。return返回体里面可以定义传给后端的对象的属性等等。

        然后index.tsx文件，直接引用hooks.ts文件里面的方法，直接调用封装好的方法获取数据集并对其进行处理。

import { infoAirshipform,deleteAirshipform} from './hooks';//引入hooks.ts文件



const onDeleteGround = record => {
    const asId = record.asId;
    deleteAirshipform(asId).then(() => {//直接调用方法对数据进行处理，代码量减少。
      setDatalist(datalist.filter(item => item.asId !== asId));
      if (current == 1) {
        getData();
      } else {
        infoAirshipform(current - 1).then(resp => {
          setDatalist([...resp.data]);
          setTotal(resp.total);
        });
      }
    });
    message.success("删除成功！")
  };
const getData = () => {//获取数据集的接口写起来更简单。
    // const list = airshipSimulation();
    // console.log(list,'list')
    // setDatalist(list);

    infoAirshipform().then((resp: any) => {
      setDatalist([...resp.data]);
      setTotal(resp.total);
    });

        这里我只粘贴了部分代码，有想详细了解的小伙伴可以私信我交流一下哦。