fetch-axios v0.0.7

fetch-axios

fetch-axios like axios implement with fetch api

usage

import fetchApi from 'fetch-axios';
import {FaxiosResponse, FaxiosRequest, RequestInterceptor, ResponseInterceptor} from 'fetch-axios';
import errors from '@/common/errors';
fetchApi.config({
  baseUrl: '/api/v1',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
  transformResponse: (res: FaxiosResponse<any>) => {
    if (res.status >= 200 && res.status < 300) {
      const data = res.data;
      if (data.status === 'ok') {
        // business ok
        return data.data;
      } else {
        throw new errors.BuessinessError({code: data.code, message: data.message});
      }
    } else {
      throw new errors.NetworkError({httpCode: res.status, message: res.statusText});
    }
  },
});

const reqAop: RequestInterceptor = (req: FaxiosRequest) => {
  console.log('RequestInteceptor...');
  console.log(req);
  return req;
};
const resAop: ResponseInterceptor = (res: FaxiosResponse) => {
  console.log('ResponseInteceptor....');
  console.log(res);
  return res;
};

fetchApi.addRequestInterceptor(reqAop);
fetchApi.addResponseInterceptor(resAop);

export default fetchApi;

design

/**
 * design
 *  |-----custom transform FaxiosRequest ---->|or|-----global transform FaxiosRequest ---->|
 *  |--------request interceptor ------------>|
 *  |-------FaxiosRequest => Request -------->|
 *  |-----------before request -------------->|
 *  |--------_ window.fetch(Request)----_---->|
 *  |-----------after request --------------->|
 *  |------Response => FaxiosResponse ------->|
 *  |--------response interceptor ----------->|
 *  |-----custom transform FaxiosResponse---->|or|-----global transform FaxiosRequest ---->|
 */

api types

interface NormalObject {
  [key: string]: string;
}

export interface FaxiosOptions {
  baseUrl?: string;
  headers?: NormalObject;
  timeout?: number;
  mode?: RequestMode;
  credentials?: RequestCredentials;
  beforeRequest?: (req: FaxiosRequest, request: Request) => void;
  afterRequest?: (req: FaxiosRequest, response: Response) => void;
  transformRequest?: (req: FaxiosRequest) => FaxiosRequest;
  transformResponse?: (res: FaxiosResponse<any>) => FaxiosResponse<any>;
}

export interface FaxiosRequest {
  url?: string;
  method?: string;
  headers?: NormalObject;
  query?: NormalObject;
  urlParams?: NormalObject;
  payload?: any;
  config?: FaxiosOptions;
}

export interface FaxiosResponse<T> {
  status: number;
  statusText: string;
  data: T;
  headers: NormalObject;
  config: FaxiosOptions;
  request: FaxiosRequest;
  originalResponse: Response;
}

export type RequestInterceptor = (req: FaxiosRequest) => Promise<any>;
export type ResponseInterceptor = (res: FaxiosResponse<any>) => Promise<any>;

faxios api

type ReqMethod = (url: string, options: FaxiosRequest) => Promise<FaxiosResponse<any>>;
interface FaxiosApi {
  get: ReqMethod;
  post: ReqMethod;
  put: ReqMethod;
  delete: ReqMethod;
  patch: ReqMethod;
  request: (options: FaxiosRequest) => Promise<FaxiosResponse<any>>;
  config: (defaultOpts: FaxiosOptions) => void;
  addRequestInterceptor: (reqInterceptor: any) => void;
  addResponseInterceptor: (resInterceptor: any) => void;
  FaxiosApi: any;
}