aplus reuse axios provide some methods
npm install @aplus-frontend/axiosRepackaged axios to make it easier to send request with axios
``javascript`
//add -w in you root folder
pnpm install @aplus-frontend/axios -S -w
type: post
tips: post method
type: get
tips: get method
type: put
tips: put method
type: delete
tips: delete method
type: request
tips: request method
options
| Props | Type | default | explanation |
| ------- | -------------------- | ------- | ----------------------------------------------------------------------------------------- |
| config | AxiosRequestConfig | - | AxiosRequestConfig same as axios request config |RequestOptions
| options | | - | RequestOptions |
RequestOptions options
| Props | Type | default | explanation |
| ---------------------- | --------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| joinParamsToUrl | boolean | true | Splicing request parameters to url |boolean
| formatDate | | true | Format request parameter time |boolean
| isTransformResponse | | true | Whether to process the request result |boolean
| isReturnNativeResponse | | false | Whether to return native response headers boolean
For example: use this attribute when you need to get the response headers |
| joinPrefix | | true | Whether to join url ,perfix will add to url by default |string
| apiUrl | | - | Interface address, use the default apiUrl if you leave it blank |string
| urlPrefix | | - | url perfix |'none'\| 'modal'\|'message'\|'notice'
| errorMessageMode | | - | Error message prompt type |'none'\| 'modal'\|'message'\|'notice'
| successMessageMode | | - | Success message prompt type |boolean
| joinTime | | true | Whether to add a timestamp,It's will add Timestamp to query params if request type is get |boolean
| ignoreCancelToken | | false | Ignore duplicate requests |boolean
| withToken | | true | Whether to send token in header |Object
| retryRequest | | {isOpenRetry: true,count: 5,waitTime: 100} | Request retry Strategy |string
| customSuccessMessage | | - | Custom success prompt |boolean
| closeErrorModal | | false | Close error modal |
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
}
);
}
``