时间戳

首页 > 解决方案 > 函数 Javascript 外的 const 变量

javascript - 函数 Javascript 外的 const 变量

问题描述

我有多个导出函数来处理 API 请求。我遇到了一些问题。

请在这里阅读我的代码：

export const CreateAPI = (path, dataForm) => {
  const loading = document.querySelector('.loading-bar');
  loading.classList.add('is-loading');

  return Axios.post(`${process.env.REACT_APP_API_SERVER}${path}`, dataForm, {
    headers: { 'Content-Type': 'multipart/form-data' }
  })
    .then(res => {
      if (res.status >= 200 && res.status <= 299) {
        loading.classList.remove('is-loading');
        return res.status
      } else {
        Promise.reject(res);
      }
    })
    .catch(err => console.log(err));
}

export const ReadAPI = (path, params) => {
  const loading = document.querySelector('.loading-bar');
  loading.classList.add('is-loading');

  return Axios.get(`${process.env.REACT_APP_API_SERVER}${path}${params || ''}`)
    .then(res => {
      if (res.status >= 200 && res.status <= 299) {
        loading.classList.remove('is-loading');
        return res.data
      } else {
        Promise.reject(res);
      }
    })
    .catch(() => {
      localStorage.removeItem('jwtToken');
      window.location.href = './login';
    });
}

如何使任何导出函数的const加载可重用？

标签： javascriptvariablesscopereusability

解决方案

像这样的东西？顺便说一句，您可以将加载服务提取到单独的文件中。

简单的小提琴来展示这个想法。

https://jsfiddle.net/ramseyfeng/hpaLn9kj/10/

const loading = document.querySelector('.loading-bar');
loading.start = () => {
  loading.classList.add('is-loading');
};

loading.stop = () => {
  loading.classList.remove('is-loading');
};

export const CreateAPI = (path, dataForm) => {
  loading.start();
  return Axios.post(`${process.env.REACT_APP_API_SERVER}${path}`, dataForm, {
    headers: { 'Content-Type': 'multipart/form-data' }
  })
    .then(res => {
      if (res.status >= 200 && res.status <= 299) {
        loading.stop();
        return res.status
      } else {
        Promise.reject(res);
      }
    })
    .catch(err => console.log(err));
}

export const ReadAPI = (path, params) => {
  loading.start();
  return Axios.get(`${process.env.REACT_APP_API_SERVER}${path}${params || ''}`)
    .then(res => {
      if (res.status >= 200 && res.status <= 299) {
        loading.stop();
        return res.data
      } else {
        Promise.reject(res);
      }
    })
    .catch(() => {
      localStorage.removeItem('jwtToken');
      window.location.href = './login';
    });
}

推荐阅读