Aplus axios

Quick start

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

Methods

$3

type: post(config: AxiosRequestConfig, options?: RequestOptions): Promise;

tips: post method

$3

type: get(config: AxiosRequestConfig, options?: RequestOptions): Promise;

tips: get method

$3

type: put(config: AxiosRequestConfig, options?: RequestOptions): Promise;

tips: put method

$3

type: delete(config: AxiosRequestConfig, options?: RequestOptions): Promise;

tips: delete method

$3

type: request(config: AxiosRequestConfig, options?: RequestOptions): Promise;

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:

`javascript
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

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

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

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

``