react+axios封装公共请求函数

新建文件service.ts
import { message } from 'antd';
import type {
  AxiosError,
  AxiosHeaders,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from 'axios';
import axios from 'axios';

// Create axios instance
console.log('API_HOST', process.env, process.env.API_HOST);
const service = axios.create({
  baseURL: process.env.API_HOST, 
  timeout: 60 * 1000,
});

// Handle Error
const handleError = (error: AxiosError): Promise<AxiosError> => {
  if (error.response?.status === 401 || error.response?.status === 504) {
     localStorage.clear();
    location.href = '/login';
  }
  message.error(error.message || 'error');
  return Promise.reject(error);
};

// Request interceptors configuration
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = localStorage.getItem('token')
  if (token) {
    (config as Recordable).headers['token'] = `${token}`;
  }
  (config as Recordable).headers['Content-Type'] = 'application/json';
  return config;
}, handleError);

// Respose interceptors configuration
service.interceptors.response.use((response: AxiosResponse) => {
  const headers = response?.headers;
  const contentType: any = (headers as AxiosHeaders).get
    ? (headers as AxiosHeaders).get('Content-Type') || ''
    : '';
  const data = response.data;
  if (contentType && contentType.indexOf('image/jpeg') !== -1) {
    return data;
  }
  if (data.code === 200) {
    if (data.success) {
      return data.data;
    } else {
      if (data && data.msg) {
        message.error((data && data.msg) || '操作失败');
      }
      return Promise.reject('error');
    }
  } else if (data.code === 401) {
    localStorage.clear();
    location.href = '/login';
  } else {
    if (data && data.msg) {
      message.error((data && data.msg) || '操作失败');
    }
    return Promise.reject('error');
  }
}, handleError);

export { service };
使用
import { service } from '@/utils/service';

export function getQiniuToken(params: any) {
  return service({
    url: `xxx/xxx/gettoken`,
    method: 'get',
    params
  });
}
export function getQiniuToken(data: any) {
  return service({
    url: `xxx/xxx/gettoken`,
    method: 'post',
    data
  });
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容