Skip to content

Commit 6430a0c

Browse files
committed
chore: fix readme
1 parent ebd34b1 commit 6430a0c

File tree

2 files changed

+45
-139
lines changed

2 files changed

+45
-139
lines changed

README.md

+23-70
Original file line numberDiff line numberDiff line change
@@ -355,58 +355,6 @@ Axle provides the usage of Vue Composition API style, which encapsulates the `lo
355355
</template>
356356
```
357357

358-
### Parallel Utils
359-
360-
Axle provides some parallel request processing tools, please refer to the following examples.
361-
362-
```html
363-
<script setup>
364-
import { createAxle } from '@varlet/axle'
365-
import { createUseAxle, useAverageProgress, useHasLoading, useValues } from '@varlet/axle/use'
366-
367-
const axle = createAxle(/** @see https://axios-http.com **/)
368-
369-
const useAxle = createUseAxle({ axle })
370-
371-
const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
372-
method: 'get',
373-
url: '/user',
374-
})
375-
376-
const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
377-
method: 'get',
378-
url: '/role',
379-
})
380-
381-
// At the end of all requests, loading is false
382-
const loading = useHasLoading(isUsersLoading, isRolesLoading)
383-
// At the end of all requests, downloadProgress is 1
384-
const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
385-
// Ref<[
386-
// [{ name: 'foo' }, { name: 'bar' }],
387-
// [{ role: 'admin' }, { role: 'user' }]
388-
// ]> <-
389-
// [
390-
// Ref<[{ name: 'foo' }, { name: 'bar' }]>,
391-
// Ref<[{ role: 'admin' }, { role: 'user' }]>
392-
// ]
393-
const usersRoles = useValues(users, roles)
394-
395-
function sendAllRequest() {
396-
// parallel
397-
getUsers()
398-
getRoles()
399-
}
400-
</script>
401-
402-
<template>
403-
<span>{{ usersRoles }}</span>
404-
<span>{{ loading }}</span>
405-
<span>{{ downloadProgress }}</span>
406-
<button @click="sendAllRequest">Send All Request</button>
407-
</template>
408-
```
409-
410358
### API Definition Enhancement
411359

412360
`createApi` is supported since `v0.9.0`, which is used to define APIs.
@@ -503,15 +451,15 @@ before:
503451

504452
```html
505453
<script setup>
506-
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
507-
method: 'get',
508-
url: '/user',
509-
})
510-
511-
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
512-
method: 'get',
513-
url: '/post',
514-
})
454+
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
455+
method: 'get',
456+
url: '/user',
457+
})
458+
459+
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
460+
method: 'get',
461+
url: '/post',
462+
})
515463
</script>
516464

517465
<template>
@@ -526,15 +474,15 @@ after:
526474

527475
```html
528476
<script setup>
529-
const [users, getUsers] = useAxle({
530-
method: 'get',
531-
url: '/user',
532-
})
533-
534-
const [posts, getPosts] = useAxle({
535-
method: 'get',
536-
url: '/post',
537-
})
477+
const [users, getUsers] = useAxle({
478+
method: 'get',
479+
url: '/user',
480+
})
481+
482+
const [posts, getPosts] = useAxle({
483+
method: 'get',
484+
url: '/post',
485+
})
538486
</script>
539487

540488
<template>
@@ -544,3 +492,8 @@ after:
544492
<button @click="getPosts">Send Request</button>
545493
</template>
546494
```
495+
496+
### API Generation Tool
497+
498+
The `API` generation tool can generate all `API dispatcher` and `type declarations` through `Schema` of `Openapi3/Swagger2`.
499+
We recommend using [api-farmer](https://github.com/varletjs/api-farmer), which has first-party support for `axle` and is highly customizable.

README.zh-CN.md

+22-69
Original file line numberDiff line numberDiff line change
@@ -355,58 +355,6 @@ Axle 提供了 Vue Composition API 风格的用法,封装了请求的 `加载
355355
</template>
356356
```
357357

358-
### 并行请求实用工具
359-
360-
Axle 提供了一些并行请求处理工具,请参考以下示例。
361-
362-
```html
363-
<script setup>
364-
import { createAxle } from '@varlet/axle'
365-
import { createUseAxle, useAverageProgress, useHasLoading, useValues } from '@varlet/axle/use'
366-
367-
const axle = createAxle(/** @see https://axios-http.com **/)
368-
369-
const useAxle = createUseAxle({ axle })
370-
371-
const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
372-
method: 'get',
373-
url: '/user',
374-
})
375-
376-
const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
377-
method: 'get',
378-
url: '/role',
379-
})
380-
381-
// 所有请求结束时,loading 为 false
382-
const loading = useHasLoading(isUsersLoading, isRolesLoading)
383-
// 所有请求结束时,downloadProgress 为 1
384-
const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
385-
// Ref<[
386-
// [{ name: 'foo' }, { name: 'bar' }],
387-
// [{ role: 'admin' }, { role: 'user' }]
388-
// ]> <-
389-
// [
390-
// Ref<[{ name: 'foo' }, { name: 'bar' }]>,
391-
// Ref<[{ role: 'admin' }, { role: 'user' }]>
392-
// ]
393-
const usersRoles = useValues(users, roles)
394-
395-
function sendAllRequest() {
396-
// parallel
397-
getUsers()
398-
getRoles()
399-
}
400-
</script>
401-
402-
<template>
403-
<span>{{ usersRoles }}</span>
404-
<span>{{ loading }}</span>
405-
<span>{{ downloadProgress }}</span>
406-
<button @click="sendAllRequest">发送全部请求</button>
407-
</template>
408-
```
409-
410358
### API 定义增强
411359

412360
`0.9.0` 开始支持 `createApi`,以增强 API 定义能力。
@@ -503,15 +451,15 @@ async function handleDelete(id: string) {
503451

504452
```html
505453
<script setup>
506-
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
507-
method: 'get',
508-
url: '/user',
509-
})
510-
511-
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
512-
method: 'get',
513-
url: '/post',
514-
})
454+
const [users, getUsers, { loading: isUsersLoading }] = useAxle({
455+
method: 'get',
456+
url: '/user',
457+
})
458+
459+
const [posts, getPosts, { loading: isPostsLoading }] = useAxle({
460+
method: 'get',
461+
url: '/post',
462+
})
515463
</script>
516464

517465
<template>
@@ -526,15 +474,15 @@ async function handleDelete(id: string) {
526474

527475
```html
528476
<script setup>
529-
const [users, getUsers] = useAxle({
530-
method: 'get',
531-
url: '/user',
532-
})
477+
const [users, getUsers] = useAxle({
478+
method: 'get',
479+
url: '/user',
480+
})
533481
534-
const [posts, getPosts] = useAxle({
535-
method: 'get',
536-
url: '/post',
537-
})
482+
const [posts, getPosts] = useAxle({
483+
method: 'get',
484+
url: '/post',
485+
})
538486
</script>
539487

540488
<template>
@@ -544,3 +492,8 @@ async function handleDelete(id: string) {
544492
<button @click="getPosts">Send Request</button>
545493
</template>
546494
```
495+
496+
### API 生成工具
497+
498+
`API` 生成工具可以通过 `Openapi3/Swagger2``Schema` 生成所有的 `API 调用器``类型声明`
499+
我们推荐使用 [api-farmer](https://github.com/varletjs/api-farmer),它对 `axle` 第一方支持,并且具有高可定制性。

0 commit comments

Comments
 (0)