用ES6和fetch封装网络请求

最新推荐文章于 2024-07-28 12:19:03 发布

RedColinar

最新推荐文章于 2024-07-28 12:19:03 发布

阅读量2.8k

点赞数

文章标签： url javascript 网络

本文链接：https://blog.csdn.net/Boomcrow/article/details/78598497

版权

export default async(url='', data={}, type='GET', method='fetch') => {
  type = type.toUpperCase;
  url = url + baseUrl;

  if(type == 'GET') { // 拼接参数
    let dataStr = '';
    Object.keys(data).forEach((key, index, array) => {
      dataStr = dataStr + key + '=' + data[key] + '&';
    })

    if(dataStr != '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
      url = url + '?' + dataStr;
    }
  }

  if(window.fetch && method == 'fetch') {
    let requestConfig = {
            credentials: 'include',
            method: type,
            headers: {
                'Accept': 'application/json', // 用户代理可处理的媒体类型
                'Content-Type': 'application/json' // 报文主体对象类型
            },
            mode: "cors", // 跨域
            cache: "force-cache"
    }

    if(type == 'POST') {
      Object.defineProperties(requestConfig, 'body', {
        value: JSON.stringify(data)
      })
    }

    try {
      const response = await fetch(url, requestConfig);
      const responseJson = await response.json();
      return responseJson;
    } catch (error) {
      throw new Error(error)
    }
  } else {
    // 如果浏览器不支持 fetch
    return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject;
            }

            let sendData = '';
            if (type == 'POST') {
                sendData = JSON.stringify(data);
            }

            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);

            requestObj.onreadystatechange = () => {
                if (requestObj.readyState == 4) {
                    if (requestObj.status == 200) {
                        let obj = requestObj.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(requestObj)
                    }
                }
            }
        })
  }
}