Simple encapsulation of native fetch requests

Native fetch Request simple encapsulation

1、 Common request encapsulation

<script>
    /*
    query:  yes get request , Parameters need to be spliced to url After 
    request： yes post request , utilize body Let's pass on the parameters 
    */
    export const postData = async (url = '', data: {query?: any, request?: any, methodType?: boolean}) => {
      /*  about url To deal with  */
      let newUrl: string = '';
      if(data?.query) {
        let queryParams: string = '';
        for(let key in data?.query) {
          queryParams += `${key}=${data?.query[key]}&`;
        }
        newUrl = url + `?${queryParams}`;
      }else {
        newUrl = url;
      }
      const response = await fetch(newUrl, {
        method: data?.methodType ? 'GET' : 'POST',
        /*  Allow cross-domain  */
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json',      
        },
        body: JSON.stringify(data?.request),
        /*  carry cookie */
        credentials:'include',
      })
      return response.json();
    }
</script>

2、 Upload file request

<script>
    /* 
     What needs special attention here is ： Cannot configure headers, If you add this attribute , Request will make an error 
    */
   const formData = new FormData();
   formData.append('upload',files?.[0])// The first parameter is attribute , The second parameter is the uploaded text stream information set 
    fetch(newUrl, {
      method: "POST",
      credentials: 'include',
      mode:'cors',
      body: formData
    })
 </script>