chore: format md

varletjs · Dec 2, 2023 · 4802e8f · 4802e8f
1 parent f2bb488
commit 4802e8f
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 172 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+package.json
+*.md
+.github/**
+.history/**
+
+pnpm-lock.yaml
+pnpm-workspace.yaml
diff --git a/README.md b/README.md
@@ -203,55 +203,56 @@ Axle provides the usage of Vue Composition API style, which encapsulates the `lo
 
 ```html
 <script setup>
-  import { createAxle } from '@varlet/axle'
-  import { createUseAxle } from '@varlet/axle/use'
-
-  const axle = createAxle(/** @see https://axios-http.com **/)
-  const useAxle = createUseAxle({
-    axle,
-    // Optional value: Default onTransform of the useAxle
-    onTransform: (response) => response,
-  })
-
-  const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
-    // Request initial value
-    value: [],
-    // Request method
-    method: 'get',
-    // Request url
-    url: '/user',
-    // Whether to send the request immediately, defaults false
-    immediate: true,
-    // The number of retries after a failed request, defaults 0
-    retry: 3,
-    // Whether the value needs to be reset before requesting, defaults false
-    resetValue: true,
-    // Request params, defaults {}
-    // When params is an object, it will be carried when sending the first request (immediate)
-    // When params is a function, it will be carried every time a request is sent.
-    params: { current: 1, pageSize: 10 },
-    // Axios config, see https://axios-http.com
-    config: { headers: {} },
-    // lifecycle
-    onBefore(refs) {
-      const { data, loading, error, uploadProgress, downloadProgress } = refs
-      console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
-      // Do request before
-    },
-    onTransform(response, refs) {
-      // Handle data transform, The transformed data will be the value of users.
-      return response.data
-    },
-    onSuccess(response, refs) {
-      // Do request success
-    },
-    onError(error, refs) {
-      // Do request error
-    },
-    onAfter(refs) {
-      // Do request after
-    },
-  })
+import { createAxle } from '@varlet/axle'
+import { createUseAxle } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+
+const useAxle = createUseAxle({
+  axle,
+  // Optional value: Default onTransform of the useAxle
+  onTransform: (response) => response,
+})
+
+const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+  // Request initial value
+  value: [],
+  // Request method
+  method: 'get',
+  // Request url
+  url: '/user',
+  // Whether to send the request immediately, defaults false
+  immediate: true,
+  // The number of retries after a failed request, defaults 0
+  retry: 3,
+  // Whether the value needs to be reset before requesting, defaults false
+  resetValue: true,
+  // Request params, defaults {}
+  // When params is an object, it will be carried when sending the first request (immediate)
+  // When params is a function, it will be carried every time a request is sent.
+  params: { current: 1, pageSize: 10 },
+  // Axios config, see https://axios-http.com
+  config: { headers: {} },
+  // lifecycle
+  onBefore(refs) {
+    const { data, loading, error, uploadProgress, downloadProgress } = refs
+    console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
+    // Do request before
+  },
+  onTransform(response, refs) {
+    // Handle data transform, The transformed data will be the value of users.
+    return response.data
+  },
+  onSuccess(response, refs) {
+    // Do request success
+  },
+  onError(error, refs) {
+    // Do request error
+  },
+  onAfter(refs) {
+    // Do request after
+  },
+})
 </script>
 
 <template>
@@ -271,43 +272,44 @@ Axle provides some parallel request processing tools, please refer to the follow
 
 ```html
 <script setup>
-  import { createAxle } from '@varlet/axle'
-  import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
-
-  const axle = createAxle(/** @see https://axios-http.com **/)
-  const useAxle = createUseAxle({ axle })
-
-  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-    value: [],
-    method: 'get',
-    url: '/user',
-  })
-
-  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-    value: [],
-    method: 'get',
-    url: '/role',
-  })
-
-  // At the end of all requests, loading is false
-  const loading = useHasLoading(isUsersLoading, isRolesLoading)
-  // At the end of all requests, downloadProgress is 1
-  const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
-  // Ref<[
-  //   [{ name: 'foo' }, { name: 'bar' }],
-  //   [{ role: 'admin' }, { role: 'user' }]
-  // ]> <-
-  // [
-  //   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
-  //   Ref<[{ role: 'admin' }, { role: 'user' }]>
-  // ]
-  const usersRoles = useValues(users, roles)
-
-  function sendAllRequest() {
-    // parallel
-    getUsers()
-    getRoles()
-  }
+import { createAxle } from '@varlet/axle'
+import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+
+const useAxle = createUseAxle({ axle })
+
+const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+  value: [],
+  method: 'get',
+  url: '/user',
+})
+
+const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+  value: [],
+  method: 'get',
+  url: '/role',
+})
+
+// At the end of all requests, loading is false
+const loading = useHasLoading(isUsersLoading, isRolesLoading)
+// At the end of all requests, downloadProgress is 1
+const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
+// Ref<[
+//   [{ name: 'foo' }, { name: 'bar' }],
+//   [{ role: 'admin' }, { role: 'user' }]
+// ]> <-
+// [
+//   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
+//   Ref<[{ role: 'admin' }, { role: 'user' }]>
+// ]
+const usersRoles = useValues(users, roles)
+
+function sendAllRequest() {
+  // parallel
+  getUsers()
+  getRoles()
+}
 </script>
 
 <template>

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -203,55 +203,56 @@ Axle 提供了 Vue Composition API 风格的用法，封装了请求的 `加载
 
 ```html
 <script setup>
-  import { createAxle } from '@varlet/axle'
-  import { createUseAxle } from '@varlet/axle/use'
-
-  const axle = createAxle(/** @see https://axios-http.com **/)
-  const useAxle = createUseAxle({
-    axle,
-    // 可选项: useAxle 的默认 onTransform
-    onTransform: (response) => response,
-  })
-
-  const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
-    // 请求初始化数据
-    value: [],
-    // 请求方法
-    method: 'get',
-    // 请求地址
-    url: '/user',
-    // 是否立即发送请求, 默认值: false
-    immediate: true,
-    // 错误重试次数, 默认值: 0
-    retry: 3,
-    // 请求前是否需要重置 value, 默认值: false
-    resetValue: true,
-    // 请求参数, 默认值: {}
-    // 当参数是一个对象时，发送第一个请求（immediate）时将携带它
-    // 当参数是一个函数时，每次发送请求时都会携带它。
-    params: { current: 1, pageSize: 10 },
-    // Axios 配置, see https://axios-http.com
-    config: { headers: {} },
-    // 生命周期
-    onBefore(refs) {
-      const { data, loading, error, uploadProgress, downloadProgress } = refs
-      console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
-      // 处理请求前逻辑
-    },
-    onTransform(response, refs) {
-      // 处理数据转换，转换后的数据将成为 users 的值。
-      return response.data
-    },
-    onSuccess(response, refs) {
-      // 处理请求成功逻辑
-    },
-    onError(error, refs) {
-      // 处理请求错误逻辑
-    },
-    onAfter(refs) {
-      // 处理请求结束逻辑，无论成功失败都会触发。
-    },
-  })
+import { createAxle } from '@varlet/axle'
+import { createUseAxle } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+
+const useAxle = createUseAxle({
+  axle,
+  // 可选项: useAxle 的默认 onTransform
+  onTransform: (response) => response,
+})
+
+const [users, getUsers, { loading, error, uploadProgress, downloadProgress, abort }] = useAxle({
+  // 请求初始化数据
+  value: [],
+  // 请求方法
+  method: 'get',
+  // 请求地址
+  url: '/user',
+  // 是否立即发送请求, 默认值: false
+  immediate: true,
+  // 错误重试次数, 默认值: 0
+  retry: 3,
+  // 请求前是否需要重置 value, 默认值: false
+  resetValue: true,
+  // 请求参数, 默认值: {}
+  // 当参数是一个对象时，发送第一个请求（immediate）时将携带它
+  // 当参数是一个函数时，每次发送请求时都会携带它。
+  params: { current: 1, pageSize: 10 },
+  // Axios 配置, see https://axios-http.com
+  config: { headers: {} },
+  // 生命周期
+  onBefore(refs) {
+    const { data, loading, error, uploadProgress, downloadProgress } = refs
+    console.log(data.value, loading.value, error.value, uploadProgress.value, downloadProgress.value)
+    // 处理请求前逻辑
+  },
+  onTransform(response, refs) {
+    // 处理数据转换，转换后的数据将成为 users 的值。
+    return response.data
+  },
+  onSuccess(response, refs) {
+    // 处理请求成功逻辑
+  },
+  onError(error, refs) {
+    // 处理请求错误逻辑
+  },
+  onAfter(refs) {
+    // 处理请求结束逻辑，无论成功失败都会触发。
+  },
+})
 </script>
 
 <template>
@@ -271,43 +272,44 @@ Axle 提供了一些并行请求处理工具，请参考以下示例。
 
 ```html
 <script setup>
-  import { createAxle } from '@varlet/axle'
-  import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
-
-  const axle = createAxle(/** @see https://axios-http.com **/)
-  const useAxle = createUseAxle({ axle })
-
-  const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
-    value: [],
-    method: 'get',
-    url: '/user',
-  })
-
-  const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
-    value: [],
-    method: 'get',
-    url: '/role',
-  })
-
-  // 所有请求结束时，loading 为 false
-  const loading = useHasLoading(isUsersLoading, isRolesLoading)
-  // 所有请求结束时，downloadProgress 为 1
-  const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
-  // Ref<[
-  //   [{ name: 'foo' }, { name: 'bar' }],
-  //   [{ role: 'admin' }, { role: 'user' }]
-  // ]> <-
-  // [
-  //   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
-  //   Ref<[{ role: 'admin' }, { role: 'user' }]>
-  // ]
-  const usersRoles = useValues(users, roles)
-
-  function sendAllRequest() {
-    // parallel
-    getUsers()
-    getRoles()
-  }
+import { createAxle } from '@varlet/axle'
+import { createUseAxle, useValues, useAverageProgress, useHasLoading } from '@varlet/axle/use'
+
+const axle = createAxle(/** @see https://axios-http.com **/)
+
+const useAxle = createUseAxle({ axle })
+
+const [users, getUsers, { loading: isUsersLoading, downloadProgress: usersDownloadProgress }] = useAxle({
+  value: [],
+  method: 'get',
+  url: '/user',
+})
+
+const [roles, getRoles, { loading: isRolesLoading, downloadProgress: rolesDownloadProgress }] = useAxle({
+  value: [],
+  method: 'get',
+  url: '/role',
+})
+
+// 所有请求结束时，loading 为 false
+const loading = useHasLoading(isUsersLoading, isRolesLoading)
+// 所有请求结束时，downloadProgress 为 1
+const downloadProgress = useAverageProgress(usersDownloadProgress, rolesDownloadProgress)
+// Ref<[
+//   [{ name: 'foo' }, { name: 'bar' }],
+//   [{ role: 'admin' }, { role: 'user' }]
+// ]> <-
+// [
+//   Ref<[{ name: 'foo' }, { name: 'bar' }]>,
+//   Ref<[{ role: 'admin' }, { role: 'user' }]>
+// ]
+const usersRoles = useValues(users, roles)
+
+function sendAllRequest() {
+  // parallel
+  getUsers()
+  getRoles()
+}
 </script>
 
 <template>