原生fetch请求简单封装

原生fetch请求简单封装

1、普通请求封装

<script>
    /*
    query: 是get请求，参数需要拼接到url的之后
    request：是post请求，利用body来进行传参
    */
    export const postData = async (url = '', data: {query?: any, request?: any, methodType?: boolean}) => {
      /* 对于url的处理 */
      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',
        /* 允许跨域 */
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json',      
        },
        body: JSON.stringify(data?.request),
        /* 携带cookie */
        credentials:'include',
      })
      return response.json();
    }
</script>

2、上传文件请求

<script>
    /* 
    在这里特别需要特别注意的是：不可以配置headers,要是添加了此属性，请求则会出错
    */
   const formData = new FormData();
   formData.append('upload',files?.[0])//第一个参数为属性，第二个参数为所上传文本流信息集合
    fetch(newUrl, {
      method: "POST",
      credentials: 'include',
      mode:'cors',
      body: formData
    })
 </script>