Repackaged axios to make it easier to send request with axios

Quick start

//add -w in you root folder
pnpm install @aplus-frontend/axios -S -w

Methods

post

type: post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>;

tips: post method

get

type: get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>;

tips: get method

put

type: put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>;

tips: put method

delete

type: delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>;

tips: delete method

request

type: request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T>;

tips: request method options

| Props | Type | default | explanation | | ------- | -------------------- | ------- | ----------------------------------------------------------------------------------------- | | config | AxiosRequestConfig | - | AxiosRequestConfig same as axios request config | | options | RequestOptions | - | RequestOptions |

RequestOptions options

| Props | Type | default | explanation | | ---------------------- | --------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | joinParamsToUrl | boolean | true | Splicing request parameters to url | | formatDate | boolean | true | Format request parameter time | | isTransformResponse | boolean | true | Whether to process the request result | | isReturnNativeResponse | boolean | false | Whether to return native response headers For example: use this attribute when you need to get the response headers | | joinPrefix | boolean | true | Whether to join url ,perfix will add to url by default | | apiUrl | string | - | Interface address, use the default apiUrl if you leave it blank | | urlPrefix | string | - | url perfix | | errorMessageMode | 'none'\| 'modal'\|'message'\|'notice' | - | Error message prompt type | | successMessageMode | 'none'\| 'modal'\|'message'\|'notice' | - | Success message prompt type | | joinTime | boolean | true | Whether to add a timestamp,It's will add Timestamp to query params if request type is get | | ignoreCancelToken | boolean | false | Ignore duplicate requests | | withToken | boolean | true | Whether to send token in header | | retryRequest | Object | {isOpenRetry: true,count: 5,waitTime: 100} | Request retry Strategy | | customSuccessMessage | string | - | Custom success prompt | | closeErrorModal | boolean | false | Close error modal |

useage example with vue3

You can customize a global hooks method useDefHttp.ts like below:

import { defHttp as _defHttp, VAxios } from '@aplus-frontend/axios'

export function useDefHttp() {
  const globSetting = useGlobSetting()
  const urlPrefix = globSetting.urlPrefix
  const userStore = useUserStoreWithOut()
  const localeStore = useLocaleStore()
  const defHttp = _defHttp({
    apiUrl: globSetting.apiUrl,
    urlPrefix: urlPrefix,
    useMessageHook: useMessage,
    getToken: getToken,
    setToken: userStore.setToken,
    logout: () => {
      if (qiankunWindow.__POWERED_BY_QIANKUN__) {
        qiankunWindow.setGlobalState({
          redirectTo: PageEnum.BASE_LOGIN,
          token: setAuthCache(TOKEN_KEY, undefined),
        })
      } else {
        userStore.logout()
      }
    },
    getLocale: localeStore.getLocale,
  })
  return {
    defHttp,
  }
}

after you can write methods in your project api folder

import { useDefHttp } from '@/hooks/web/useDefHttp';
const { defHttp } = useDefHttp();

//base useage whit post method
export function inventoryInOrderListApi(params: model.InventoryInParams) {
  return defHttp.post<BasicFetchResult<model.InventoryInOrderItem[]>>({
    url: UrlMap.InventoryInOrderList,
    params
  });
}

//Set the return result to blob and close the error pop-up window
export function exportInOrderDetails() {
  return defHttp.post<Blob>(
    {
      url: UrlMap.ExportDetailList,
      responseType: 'blob'
    },
    {
      isTransformResponse: false,
      closeErrorModal: true
    }
  );
}