v3 upgrade guidelines

The following is a migration guide from alova v2 to v3.

1. Changes to the import path of the fetch adapter:

// v2
import GlobalFetch from 'alova/GlobalFetch';

// v3
import adapterFetch from 'alova/fetch';

2. Changes to the import path of hooks such as useRequest/useWatcher/useFetcher:

// v2
import { useRequest } from 'alova';
import { usePagination, useForm } from '@alova/scene-[vue/react/svelte]';

// v3
import { useRequest, usePagination, useForm } from 'alova/client';

3. The cache mode is redesigned, the placeholder mode is removed, and the initialData function can be used to achieve the same effect:

// v2
const { data } = useRequest(Getter, {
  placeholder: true
});

// v3
const { data } = useRequest(Getter, {
  initialData() {
    // Set the last response data
    const storedData = localStorage.getItem('placeholder-data');
    return JSON.parse(storedData || '{}');

    // Also use alova's storage adapter
    // return alovaInst.l2cache.get('placeholder-data');
  }
}).onSuccess(({ data, method }) => {
  // Save response data
  localStorage.setItem('placeholder-data', JSON.stringify(data));

  // Also use alova's storage adapter
  alovaInst.l2cache.set('placeholder-data', data);
});

4. Cache operation function becomes asynchronous and supports specifying cache level:

// v2
setCache(methodInstance, data);
const cache = queryCache(methodInstance);
invalidateCache();

// v3
await setCache(methodInstance, data, { policy: 'all' });
const cache = queryCache(methodInstance);
await invalidateCache(methodInstance);

5. Changes in the usage of method snapshot matchers:

// v2
invalidateCache('method-name');

// v3
const methodSnapshots = alovaInst.snapshots.match('method-name');
invalidateCache(methodSnapshots);

6. The sendable option of useWatcher has been removed, use middleware instead:

// v2
useWatcher(() => method, [xxx], { sendable: () => sendable });

// v3
useWatcher(() => method, [xxx], {
  async middleware(_, ​​next) {
    if (sendable) {
      return next();
    }
  }
});

7. method enableDownload/enableUpload options are removed and changed to automatic judgment:

// v2
alova.Get('/api/file', {
  enableDownload: true
});

// v3
alova.Get('/api/file');

8. responsed replaces responded in createAlova:

// v2
createAlova({
  respondedd() {
    // ...
  }
});

// v3
createAlova({
  responded() {
    // ...
  }
});

9. errorLogger parameter is removed and error handling logic is changed:

// v2
createAlova({
  errorLogger: true
});

// v3
// No need to set, error log is automatically processed

10. updateState no longer supports method Matcher, onMatch hook removed:

// v2
updateState('method-name', newState, {
  onMatch: () => {}
});

// v3
const methodSnapshots = alovaInst.snapshots.match('method-name');
updateState(methodSnapshots, newState);

11. Changes to import getMethodKey function:

// v2
import { getMethodKey } from 'alova';

// v3
import { key } from '@alova/shared/function';

12. context.update function and decoration function removed in middleware:

// v2
middleware(({ update }) => {
  update({ loading: true });
});

// v3
middleware(({ proxyStates }) => {
  proxyStates.loading.v = true;
});

13. mapWatcher is removed from @alova/vue-options:

// v2
export default {
  watch: mapWatcher({
    'testRequest.data'() {
      // ...
    }
  });
}

// v3
export default {
  watch: {
    'testRequest.data'() {
      // ...
    }
  }
}

14. Changes in how usePagination is used in React:

// v2
const {
  page: [page, setPage],
  pageSize: [pageSize, setPageSize]
} = usePagination(/*...*/);
setPage(page + 1);

// v3
const { page, pageSize, update } = usePagination(/*...*/);
update({ page: page + 1 });

15. useForm no longer supports directly passing in id to return cached hookReturns:

// v2
const states = useForm('form-id');

// v3
const { states } = useForm(formData => methodHandler(formData), {
  id: 'form-id'
});

16. SilentMethod related methods become asynchronous:

// v2
silentMethod.replace(newSilentMethod);

// v3
await silentMethod.replace(newSilentMethod);

17. accessAction adds silent parameter, no longer throws an error when no match is found.

// v2
accessAction('method-name', ({ send }) => {
  send();
});

// v3
accessAction(
  'method-name',
  ({ send }) => {
    send();
  },
  true
);

18. method.__key__ is simplified to method.key:

// v2
method.__key__ = 'custom-key';
// v3
method.key = 'custom-key ';

19. method.transformData is simplified to method.transform:

// v2
alova.Get('/api/profile', {
  transformData(data) {
    return data.detail;
  }
});
// v3
alova.Get('/api/profile', {
  transform(data) {
    return data.detail;
  }
});

20. method.localCache changed to method.cacheFor:

// v2
alova.Get('/api/profile', {
  localCache: 1000 * 60 * 60
});

// v3
alova.Get('/api/profile', {
  cacheFor: 1000 * 60 * 60
});

21. All sendArgs changed to args:

// v2
onSuccess(({ sendArgs }) => {
  // ...
});

// v3
onSuccess(({ args }) => {
  // ...
});

22. @alova/adapter-uniapp export name changed:

// v2
import { uniappStorageAdapter } from '@alova/adapter-uniapp';

// v3
import { uniappL2CacheAdapter } from '@alova/adapter-uniapp';

23. Use proxyState in middleware to access and modify state:

// v2
middleware(({ states, update }) => {
  const loading = states.loading;
  update({
    loading: true
  });
});

// v3
middleware(({ proxyStates }) => {
  proxyStates.loading.v = true;
});

24. Event binding function returns its own object and supports chain calls:

// v2
const { onSuccess, loading, data } = useRequest(method);
onSuccess(() => {
  /*...*/
});

// v3
const { loading, data } = useRequest(method).onSuccess(() => {
  /*...*/
});

25. Use alova.snapshots.match to get the visited method instance snapshot:

// v2
const methodSnapshots = matchSnapshotMethod('method-name');

// V3
const methodSnapshots = alova.snapshots.match('method-name');