zz-shopify-components/assets/zz-http-request.js

Reusable Shopify components for theme projects

(function () {
  const DEFAULT_BASE_URL = 'https://h130-app-server-us.hoverx1.cn';

  const DEFAULT_TIMEOUT = 60000;

  function getToken() {
    return localStorage.getItem('token') || '';
  }

  function buildUrl(url, params = {}) {
    const queryString = new URLSearchParams(params).toString();
    return queryString ? `${url}?${queryString}` : url;
  }

  function timeoutFetch(fetchPromise, timeout = DEFAULT_TIMEOUT) {
    return Promise.race([
      fetchPromise,
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error('请求超时，请重试')), timeout)
      ),
    ]);
  }

  function request(method, url, params = {}, options = {}) {
    const baseUrl = options.baseUrl || DEFAULT_BASE_URL;

    const timeout = options.timeout || DEFAULT_TIMEOUT;

    const fullUrl = baseUrl + url;

    let fetchOptions = {
      method: method.toUpperCase(),
      headers: {
        'Content-Type': 'application/json',
        ...(options.headers || {}),
      },
      ...options,
    };

    if (method.toLowerCase() === 'get') {
      return timeoutFetch(
        fetch(buildUrl(fullUrl, params), fetchOptions),
        timeout
      ).then(handleResponse);
    } else {
      fetchOptions.body = JSON.stringify(params);
      return timeoutFetch(fetch(fullUrl, fetchOptions), timeout).then(
        handleResponse
      );
    }
  }

  function requestFormData(method, url, formData, options = {}) {
    const baseUrl = options.baseUrl || DEFAULT_BASE_URL;
    const timeout = options.timeout || DEFAULT_TIMEOUT;
    const fullUrl = baseUrl + url;

    let fetchOptions = {
      method: method.toUpperCase(),
      headers: {
        // 不设置Content-Type，让浏览器自动设置multipart/form-data
        ...(options.headers || {}),
      },
      ...options,
    };

    // 移除可能存在的Content-Type，让浏览器自动处理FormData
    delete fetchOptions.headers['Content-Type'];

    fetchOptions.body = formData;

    return timeoutFetch(fetch(fullUrl, fetchOptions), timeout).then(
      handleResponse
    );
  }

  function handleResponse(response) {
    if (!response.ok) {
      if (response.status === 401) {
        // 未登录或登录过期，即将跳转登录页
      }
      return response.json().then((err) => {
        throw err;
      });
    }
    return response.json();
  }

  window.httpRequest = {
    get: function (url, params = {}, options = {}) {
      return request('get', url, params, options);
    },
    post: function (url, params = {}, options = {}) {
      return request('post', url, params, options);
    },
    formData: function (url, formData, options = {}) {
      return requestFormData('post', url, formData, options);
    },
  };
})();