@aplus-frontend/axios NPM

Repackaged axios to make it easier to send request with axios

NPM Version NPM Downloads NPM License

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

@aplus-frontend @aplus-frontend/axios

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago