feat: responseHandlingStrategy & errorHandlingStrategy & transformUse…

…Options

`transformUseOptions` is a low level API

packages/axues/src/create.ts

@@ -29,7 +29,7 @@ function throwErr (err: string | Error) {
 }
 
 export function createAxues (axiosInstance: AxiosInstance, createOptions?: CreateAxuesOptions) {
- const { requestConfig, responseHandle, errorHandle, cacheInstance, errorReport, loadingDelay = 300, overlayImplement: baseOverlayImplement } = createOptions || {}
+ const { requestConfig, transformUseOptions, responseHandle, errorHandle, cacheInstance, errorReport, loadingDelay = 300, overlayImplement: baseOverlayImplement } = createOptions || {}
  // @ts-expect-error
  const request: Axues = config => {
  const baseConfig = requestConfig?.() || {}
@@ -44,15 +44,15 @@ export function createAxues (axiosInstance: AxiosInstance, createOptions?: Creat
  return new Promise((resolve, reject) => {
  axiosInstance(axiosConfig).then(
  response => {
- const res = responseHandle?.(response) || response.data
+ const res = responseHandle?.(response, axiosConfig) || response.data
  if (res instanceof Error) {
  reject(res)
  } else {
  resolve(res)
  }
  },
  err => {
- const handledErr = errorHandle?.(err) || err
+ const handledErr = errorHandle?.(err, axiosConfig) || err
  reject(handledErr)
  }
  )
@@ -99,6 +99,9 @@ export function createAxues (axiosInstance: AxiosInstance, createOptions?: Creat
 
  const useFn = <TI, TO, TAction>(options: UseAxuesOptions<TI, TO, TAction>): UseAxuesOutput<TI, TO, TAction> => {
  if (!options) throw new Error('options is required')
+ if (transformUseOptions) {
+ options = transformUseOptions(options)
+ }
  const {
  promise,
  immediate = false,
@@ -214,6 +217,7 @@ export function createAxues (axiosInstance: AxiosInstance, createOptions?: Creat
  if (promise) {
  requestApi = promise(actionPayload, ac?.signal)
  } else {
+ // call transformUseOptions
  let requestOptions = resolveRequestOptions(options, actionPayload)
  if (ac) {
  requestOptions = {

packages/axues/src/types.ts

@@ -55,8 +55,9 @@ export interface Axues {
 }
 export interface CreateAxuesOptions {
  requestConfig?: () => AxiosRequestConfig
- responseHandle?: (response: AxiosResponse) => unknown
- errorHandle?: (err: AxiosError) => Error
+ transformUseOptions?: (options: UseAxuesOptions) => UseAxuesOptions
+ responseHandle?: (response: AxiosResponse, requestConfig: AxuesRequestConfig) => unknown
+ errorHandle?: (err: AxiosError, requestConfig: AxuesRequestConfig) => Error
  cacheInstance?: CacheInstance
  errorReport?: (err: Error) => void
  loadingDelay?: number
@@ -75,6 +76,8 @@ export interface AxuesRequestConfig<TI = any, TAction = any> extends Omit<AxiosR
  data?: MaybeComputedOrActionRef<TI, TAction>
  contentType?: MaybeComputedOrActionRef<ContentType, TAction>
  headers?: MaybeComputedOrActionRef<RawAxiosRequestHeaders, TAction>
+ responseHandlingStrategy?: any
+ errorHandlingStrategy?: any
 }
 
 export type DebounceMode = 'firstPass' | 'lastPass' | 'none'

packages/axues/test/handleStrategy.test.ts

@@ -0,0 +1,103 @@
+import { describe, test, expect } from 'vitest'
+import { createAxues, useAxues } from '../src'
+import axios from 'axios'
+import { defineComponent } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils'
+// @vitest-environment happy-dom
+let resStrategy = 0
+let errStrategy = 0
+let errStrategyInRes = 0
+const instance = axios.create({ baseURL: 'https://axues.io' })
+const axues = createAxues(instance, {
+ transformUseOptions: options => {
+ if (options.errorOverlay) {
+ options.errorHandlingStrategy = 2
+ }
+ if (options.method === 'post') {
+ options.responseHandlingStrategy = 1
+ }
+ return options
+ },
+ responseHandle: (response, { responseHandlingStrategy, errorHandlingStrategy }) => {
+ resStrategy = responseHandlingStrategy || 0
+ errStrategyInRes = errorHandlingStrategy || 0
+ return response.data
+ },
+ errorHandle: (err, { errorHandlingStrategy }) => {
+ console.log('111111111111', errorHandlingStrategy)
+ errStrategy = errorHandlingStrategy || 0
+ return err
+ }
+})
+
+function getWrap (component: any) {
+ return mount(component, {
+ global: {
+ plugins: [axues]
+ }
+ })
+}
+
+describe('handlingStrategy', () => {
+ test('errorHandlingStrategy in resHandle', async () => {
+ const TestComponent = defineComponent({
+ setup () {
+ const { action } = useAxues({
+ url: '/get',
+ immediate: true,
+ errorOverlay: 'foo'
+ })
+ return { action }
+ },
+ template: '<button @click="action" class="action">action</button>'
+ })
+ getWrap(TestComponent)
+ expect(errStrategyInRes).toBe(0)
+ expect(errStrategy).toBe(0)
+ expect(resStrategy).toBe(0)
+
+ await flushPromises()
+ expect(resStrategy).toBe(0)
+ expect(errStrategyInRes).toBe(2)
+ expect(errStrategy).toBe(0)
+ })
+
+ test('errorHandlingStrategy with error', async () => {
+ const TestComponent = defineComponent({
+ setup () {
+ const { action } = useAxues({
+ url: '/getError',
+ immediate: true,
+ errorOverlay: 'foo'
+ })
+ return { action }
+ },
+ template: '<button @click="action" class="action">action</button>'
+ })
+ getWrap(TestComponent)
+ expect(errStrategy).toBe(0)
+
+ await flushPromises()
+ expect(errStrategy).toBe(2)
+ })
+
+ test('responseHandlingStrategy', async () => {
+ const TestComponent = defineComponent({
+ setup () {
+ const { action } = useAxues({
+ url: '/postWithJsonData',
+ method: 'post',
+ immediate: true,
+ errorOverlay: 'foo'
+ })
+ return { action }
+ },
+ template: '<button @click="action" class="action">action</button>'
+ })
+ getWrap(TestComponent)
+ expect(resStrategy).toBe(0)
+
+ await flushPromises()
+ expect(resStrategy).toBe(1)
+ })
+})