@aplus-frontend/axios

Aplus axios

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	true	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
    }
  );
}