diff --git a/README.md b/README.md index c9b928f..a0892c7 100644 --- a/README.md +++ b/README.md @@ -28,15 +28,16 @@ axios-miniprogram 是一款为小程序平台量身定制的轻量级请求库 - 支持 `Typescript`,健全的类型系统,智能的 `IDE` 提示。 - 支持 `Promise`。 -- 支持 拦截器。 -- 支持 取消请求。 -- 支持 自定义合法状态码。 -- 支持 自定义参数序列化。 -- 支持 自定义转换数据。 -- 支持 自定义错误处理。 -- 支持 自定义平台适配器。 +- 支持 动态地址。 +- 支持 校验状态码。 +- 支持 参数序列化。 - 支持 上传/下载。 +- 支持 错误处理。 +- 支持 转换数据。 +- 支持 取消请求。 +- 支持 拦截器。 - 支持 派生领域。 +- 支持 适配器。 ## 目前内部支持的平台 diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index de884ea..0a91d79 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -18,13 +18,13 @@ export default defineConfig({ nav: [ { text: '指南', link: '/guide/intro', activeMatch: '/guide/' }, - { text: '请求方法', link: '/method/OPTIONS', activeMatch: '/method/' }, - { text: '基础', link: '/basics/config', activeMatch: '/basics/' }, + { text: '入门', link: '/basics/request', activeMatch: '/basics/' }, { - text: '高级', + text: '进阶', link: '/advanced/request-interceptor', activeMatch: '/advanced/', }, + { text: '请求方法', link: '/method/OPTIONS', activeMatch: '/method/' }, ], sidebar: sidebar(), @@ -93,6 +93,37 @@ function sidebar() { { text: '开始', link: '/guide/quick-start' }, ], }, + + { + text: '入门', + items: [ + { text: '发送请求', link: '/basics/request' }, + { text: '响应体', link: '/basics/response' }, + { text: '错误处理', link: '/basics/error-handler' }, + { text: '动态地址', link: '/basics/dynamic-url' }, + { text: '请求配置', link: '/basics/config' }, + { text: '默认配置', link: '/basics/defaults' }, + { text: '参数系列化', link: '/basics/params-serializer' }, + { text: '转换数据', link: '/basics/transform-data' }, + { text: '下载文件', link: '/basics/download' }, + { text: '上传文件', link: '/basics/upload' }, + ], + collapsed: false, + }, + + { + text: '进阶', + items: [ + { text: '请求拦截器', link: '/advanced/request-interceptor' }, + { text: '响应拦截器', link: '/advanced/response-interceptor' }, + { text: '取消请求', link: '/advanced/cancel' }, + { text: '创建实例', link: '/advanced/instance' }, + { text: '派生领域', link: '/advanced/fork' }, + { text: '平台适配器', link: '/advanced/adapter' }, + ], + collapsed: false, + }, + { text: '请求方法', items: [ @@ -108,34 +139,6 @@ function sidebar() { ], collapsed: false, }, - { - text: '基础', - items: [ - { text: '请求配置', link: '/basics/config' }, - { text: '默认配置', link: '/basics/defaults' }, - { text: '响应体', link: '/basics/response' }, - { text: '发送请求', link: '/basics/request' }, - { text: '动态地址', link: '/basics/dynamic-url' }, - { text: '参数系列化', link: '/basics/params-serializer' }, - { text: '转换数据', link: '/basics/transform-data' }, - { text: '下载文件', link: '/basics/download' }, - { text: '上传文件', link: '/basics/upload' }, - { text: '错误处理', link: '/basics/error-handler' }, - { text: '取消请求', link: '/basics/cancel' }, - ], - collapsed: false, - }, - { - text: '高级', - items: [ - { text: '请求拦截器', link: '/advanced/request-interceptor' }, - { text: '响应拦截器', link: '/advanced/response-interceptor' }, - { text: '创建实例', link: '/advanced/instance' }, - { text: '派生领域', link: '/advanced/fork' }, - { text: '平台适配器', link: '/advanced/adapter' }, - ], - collapsed: false, - }, { text: '致贡献者', diff --git a/docs/.vitepress/theme/styles/cover.css b/docs/.vitepress/theme/styles/cover.css index 4dd0ca5..b3aaddf 100644 --- a/docs/.vitepress/theme/styles/cover.css +++ b/docs/.vitepress/theme/styles/cover.css @@ -170,6 +170,10 @@ box-shadow: none; } +.DocSearch-Logo svg > * { + fill: currentColor; +} + .custom-block { border-radius: 6px; background-color: var(--vp-custom-block-tip-bg) !important; @@ -183,6 +187,10 @@ background-color: var(--vp-code-block-bg); } +.dark .DocSearch-Logo svg > * { + fill: currentColor; +} + @media (min-width: 960px) { .VPFeatures .item { width: calc(100% / 2) !important; diff --git a/docs/.vitepress/theme/styles/vars.css b/docs/.vitepress/theme/styles/vars.css index 132bcf9..3ea50c1 100644 --- a/docs/.vitepress/theme/styles/vars.css +++ b/docs/.vitepress/theme/styles/vars.css @@ -39,7 +39,8 @@ --vp-custom-block-tip-text: var(--vp-c-brand); --vp-custom-block-tip-bg: var(--vp-c-bg); - --docsearch-container-background: rgba(0, 0, 0, 0.1); + --docsearch-container-background: rgba(0, 0, 0, 0.02); + --docsearch-logo-color: var(--vp-c-brand); --vp-sidebar-width: 340px; } @@ -67,5 +68,9 @@ --vp-code-copy-code-border-color: rgba(240, 246, 252, 0.1); --vp-code-copy-code-hover-border-color: #8b949e; - --docsearch-container-background: rgba(255, 255, 255, 0.1); + --docsearch-container-background: rgba(255, 255, 255, 0.08); +} + +.dark .DocSearch { + --docsearch-logo-color: var(--vp-c-brand); } diff --git a/docs/pages/basics/cancel.md b/docs/pages/advanced/cancel.md similarity index 100% rename from docs/pages/basics/cancel.md rename to docs/pages/advanced/cancel.md diff --git a/docs/pages/basics/defaults.md b/docs/pages/basics/defaults.md index a024fd1..5eb4ae6 100644 --- a/docs/pages/basics/defaults.md +++ b/docs/pages/basics/defaults.md @@ -168,6 +168,10 @@ axios.interceptors.response.use((response) => { 默认配置和请求配置将会按优先级进行合并。 -其中 `url`、`method`、`data`、`upload`、`download` 只从 `config` 取值,`headers`、`params` 会进行深度合并,其余属性则会优先从 `config` 取值。 +其中: + +1. `url`、`method`、`data`、`upload`、`download` 只从 `config` 取值。 +2. `headers`、`params` 会分别进行深度合并。 +3. 其余属性则会优先从 `config` 取值。 具体配置合并策略请参阅 [mergeConfig.ts](https://github.com/zjx0905/axios-miniprogram/blob/main/src/core/mergeConfig.ts) 。 diff --git a/docs/pages/basics/download.md b/docs/pages/basics/download.md index b1686d4..831272c 100644 --- a/docs/pages/basics/download.md +++ b/docs/pages/basics/download.md @@ -5,7 +5,11 @@ title: 下载文件 # {{ $frontmatter.title }} ::: tip {{ $frontmatter.title }} -下载文件资源到本地,必须使用 `GET` 方法请求,并将配置项 `download` 设置为 `true`。 +下载文件资源到本地。 +::: + +::: warning 注意 +下载文件只能使用 `GET` 方法请求,并将配置项 `download` 设置为 `true`。 ::: ## 普通的下载请求 @@ -15,14 +19,9 @@ title: 下载文件 ```ts import axios from 'axios-miniprogram'; -axios - .get( - 'https://api.com/test', - {}, - { - download: true, - }, - ) +axios('https://api.com/test', { + download: true, +}) .then((response) => { const { // 临时文件路径 (本地路径)。没传入 filePath 指定文件存储路径时会返回,下载后的文件会存储到一个临时文件 @@ -41,16 +40,12 @@ axios ```ts import axios from 'axios-miniprogram'; -axios - .get( - 'https://api.com/test', - { - filePath: '你的本地路径', - }, - { - download: true, - }, - ) +axios('https://api.com/test', { + download: true, + params: { + filePath: '你的本地路径', + }, +}) .then((response) => { const { // 指定文件下载后存储的路径 (本地路径) @@ -69,28 +64,24 @@ axios ```ts import axios from 'axios-miniprogram'; -axios - .get( - 'https://api.com/test', - { - filePath: '你的本地路径', - }, - { - download: true, - onDownloadProgress(event) { - const { - // 下载进度 - progress, +axios('https://api.com/test', { + download: true, + params: { + filePath: '你的本地路径', + }, + onDownloadProgress(event) { + const { + // 下载进度 + progress, - // 已经下载的数据长度 - totalBytesSent, + // 已经下载的数据长度 + totalBytesSent, - // 预期需要下载的数据总长度 - totalBytesExpectedToSend, - } = event; - }, - }, - ) + // 预期需要下载的数据总长度 + totalBytesExpectedToSend, + } = event; + }, +}) .then((response) => { const { // 指定文件下载后存储的路径 (本地路径) diff --git a/docs/pages/basics/request.md b/docs/pages/basics/request.md index 05db1f8..c8d881e 100644 --- a/docs/pages/basics/request.md +++ b/docs/pages/basics/request.md @@ -70,6 +70,20 @@ axios }); ``` +## 请求方法 + +提供一系列基于 `axios.request()` 的请求方法,可以使用请求方法简化请求。 + +- [axios.options(url, config?)](/method/OPTIONS) +- [axios.get(url, params?, config?)](/method/GET) +- [axios.head(url, params?, config?)](/method/HEAD) +- [axios.post(url, data?, config?)](/method/POST) +- [axios.put(url, data?, config?)](/method/PUT) +- [axios.patch(url, data?, config?)](/method/PATCH) +- [axios.delete(url, params?, config?)](/method/DELETE) +- [axios.trace(url, config?)](/method/TRACE) +- [axios.connect(url, config?)](/method/CONNECT) + ## 说明 您可能发现 `axios.request()` 和 `axios()` 使用方式完全一致,为什么用法是一样的? diff --git a/docs/pages/basics/transform-data.md b/docs/pages/basics/transform-data.md index ee62645..570f7bf 100644 --- a/docs/pages/basics/transform-data.md +++ b/docs/pages/basics/transform-data.md @@ -20,7 +20,13 @@ axios('test', { transformRequest(data, headers) { return JSON.stringify(data); }, -}); +}) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); ``` 也支持多次转换。 @@ -38,7 +44,13 @@ axios('test', { return encodeURIComponent(data); }, ], -}); +}) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); ``` ## 全局转换请求数据 @@ -64,7 +76,13 @@ axios('test', { transformResponse(data, headers) { return JSON.parse(data); }, -}); +}) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); ``` 也支持多次转换。 @@ -81,7 +99,13 @@ axios('test', { return JSON.parse(data); }, ], -}); +}) + .then((response) => { + // 成功之后做些什么 + }) + .catch((error) => { + // 失败之后做些什么 + }); ``` ## 全局转换响应数据 diff --git a/docs/pages/basics/upload.md b/docs/pages/basics/upload.md index 5eb3925..529a406 100644 --- a/docs/pages/basics/upload.md +++ b/docs/pages/basics/upload.md @@ -5,7 +5,11 @@ title: 上传文件 # {{ $frontmatter.title }} ::: tip {{ $frontmatter.title }} -将本地资源上传到服务器,必须使用 `POST` 方法请求,并将请求配置项 `upload` 设置为 `true`。 +将本地资源上传到服务器。 +::: + +::: warning 注意 +上传文件只能使用 `POST` 方法请求,并将请求配置项 `upload` 设置为 `true`。 ::: ## 普通的上传请求 @@ -15,20 +19,17 @@ title: 上传文件 ```ts import axios from 'axios-miniprogram'; -axios - .post( - 'https://api.com/test', - { - // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 - name: 'fileName', +axios('https://api.com/test', { + method: 'POST', + upload: true, + data: { + // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 + name: 'fileName', - // 要上传文件资源的路径 (本地路径) - filePath: '你的本地路径', - }, - { - upload: true, - }, - ) + // 要上传文件资源的路径 (本地路径) + filePath: '你的本地路径', + }, +}) .then((response) => { const { // 开发者服务器返回的数据 @@ -47,26 +48,23 @@ axios ```ts import axios from 'axios-miniprogram'; -axios - .post( - 'https://api.com/test', - { - // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 - name: 'fileName', +axios('https://api.com/test', { + method: 'POST', + upload: true, + data: { + // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 + name: 'fileName', - // 要上传文件资源的路径 (本地路径) - filePath: '你的本地路径', + // 要上传文件资源的路径 (本地路径) + filePath: '你的本地路径', - // 这是额外的 formData 属性 - id: 1, + // 这是额外的 formData 属性 + id: 1, - // 这是额外的 formData 属性 - user: '123', - }, - { - upload: true, - }, - ) + // 这是额外的 formData 属性 + user: '123', + }, +}) .then((response) => { const { // 开发者服务器返回的数据 @@ -85,38 +83,35 @@ axios ```ts import axios from 'axios-miniprogram'; -axios - .post( - 'https://api.com/test', - { - // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 - name: 'fileName', +axios('https://api.com/test', { + method: 'POST', + upload: true, + data: { + // 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 + name: 'fileName', - // 要上传文件资源的路径 (本地路径) - filePath: '你的本地路径', + // 要上传文件资源的路径 (本地路径) + filePath: '你的本地路径', - // 这是额外的 formData 属性 - id: 1, + // 这是额外的 formData 属性 + id: 1, - // 这是额外的 formData 属性 - user: '123', - }, - { - upload: true, - onUploadProgress(event) { - const { - // 上传进度 - progress, + // 这是额外的 formData 属性 + user: '123', + }, + onUploadProgress(event) { + const { + // 上传进度 + progress, - // 已经上传的数据长度 - totalBytesSent, + // 已经上传的数据长度 + totalBytesSent, - // 预期需要上传的数据总长度 - totalBytesExpectedToSend, - } = event; - }, - }, - ) + // 预期需要上传的数据总长度 + totalBytesExpectedToSend, + } = event; + }, +}) .then((response) => { const { // 开发者服务器返回的数据 diff --git a/docs/pages/guide/quick-start.md b/docs/pages/guide/quick-start.md index 8e3829a..7e8b012 100644 --- a/docs/pages/guide/quick-start.md +++ b/docs/pages/guide/quick-start.md @@ -28,29 +28,11 @@ $ pnpm install -D axios-miniprogram ## 引用 +可以在不同的模块系统导入需要用到的功能。 + :::: code-group ```ts [ES Module] -import axios from 'axios-miniprogram'; - -axios('test'); -``` - -```ts [CommonJS] -const axios = require('axios-miniprogram').default; - -axios('test'); -``` - -:::: - -## 使用 - -### 引用 - -可以导入需要使用的功能。 - -```ts import axios, { // 取消令牌 CancelToken, @@ -67,14 +49,7 @@ import axios, { // 创建平台适配器 createAdapter, } from 'axios-miniprogram'; -``` -axios 上也有同样的功能。 - -```ts -import axios from 'axios-miniprogram'; - -// axios 同样也有这些功能 const { // 取消令牌 CancelToken, @@ -90,21 +65,68 @@ const { // 创建平台适配器 createAdapter, -} = axios; -``` -axios 上还有一些额外的功能。 - -```ts -const { // 创建实例 create, - // 获取已处理的 URL + // 获取系列化后的 URL + getUri, +} = axios; + +axios('test'); +``` + +```ts [CommonJS] +const { + // 静态对象 + // 注意:默认导出的 axios 在 CommonJS 里是以 default 属性的方式存在 + // import axios from 'axios-miniprogram' 等于 const axios = require('axios-miniprogram').default + default: axios, + + // 取消令牌 + CancelToken, + + // 判断取消请求错误 + isCancel, + + // 原始 Axios 类 + Axios, + + // 判断请求响应错误 + isAxiosError, + + // 创建平台适配器 + createAdapter, +} = require('axios-miniprogram'); + +const { + // 取消令牌 + CancelToken, + + // 判断取消请求错误 + isCancel, + + // 原始 Axios 类 + Axios, + + // 判断请求响应错误 + isAxiosError, + + // 创建平台适配器 + createAdapter, + + // 创建实例 + create, + + // 获取系列化后的 URL getUri, } = axios; ``` +:::: + +## 使用 + ### `axios(url, config?)` 可以通过把 `url` 和 `config` 传递给 `axios` 来发送请求。 diff --git a/package.json b/package.json index 06be454..f7c4cf2 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,8 @@ "keywords": [ "axios", "request", - "wechat", - "miniprogram", - "uni-app" + "mini", + "miniprogram" ], "author": "zjx0905 <954270063@qq.com>", "bugs": { diff --git a/scripts/release.ts b/scripts/release.ts index 33f3b5e..89a9bdc 100644 --- a/scripts/release.ts +++ b/scripts/release.ts @@ -1,10 +1,11 @@ -import fs from 'node:fs'; +import { writeFileSync } from 'node:fs'; import semver from 'semver'; import enquirer from 'enquirer'; import consola from 'consola'; -import { exec, pkgPath, getPkgJSON } from './utils'; +import { exec, pkgPath, getPkgJSON, resolve } from './utils'; const pkg = getPkgJSON(); +const versionTSPath = resolve('src/version.ts'); const { version: currentVersion } = pkg; main().catch((err) => exit(err.message)); @@ -115,5 +116,7 @@ function exit(msg: string) { function updateVersion(version: string) { pkg.version = version; - fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n'); + + writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n'); + writeFileSync(versionTSPath, `export const version = ${version};`); } diff --git a/src/axios.ts b/src/axios.ts index f34e08c..bd53681 100644 --- a/src/axios.ts +++ b/src/axios.ts @@ -9,6 +9,7 @@ import { isAxiosError } from './core/createError'; import { mergeConfig } from './core/mergeConfig'; import { createAdapter } from './adapter'; import defaults from './defaults'; +import { version } from './version'; /** * axios 实例默认配置 @@ -34,6 +35,10 @@ export interface AxiosInstance extends AxiosDomainRequest, Axios { * axios 静态对象 */ export interface AxiosStatic extends AxiosInstance { + /** + * 版本号 + */ + version: string; /** * Axios 类 */ @@ -78,6 +83,7 @@ axios.create = function create(config) { return createInstance(mergeConfig(axios.defaults, config)); }; +axios.version = version; axios.Axios = Axios; axios.CancelToken = CancelToken; axios.createAdapter = createAdapter; diff --git a/src/core/request.ts b/src/core/request.ts index eb4b9b5..82cfba0 100644 --- a/src/core/request.ts +++ b/src/core/request.ts @@ -100,19 +100,19 @@ export function request(config: AxiosRequestConfig) { function tryToggleProgressUpdate( adapterConfig: AxiosAdapterRequestConfig, - progressUpdate?: (callback: AxiosProgressCallback) => void, + adapterProgress?: (callback: AxiosProgressCallback) => void, ) { const { onUploadProgress, onDownloadProgress } = adapterConfig; - if (isFunction(progressUpdate)) { + if (isFunction(adapterProgress)) { switch (adapterConfig.type) { case 'upload': if (isFunction(onUploadProgress)) { - progressUpdate(onUploadProgress); + adapterProgress(onUploadProgress); } break; case 'download': if (isFunction(onDownloadProgress)) { - progressUpdate(onDownloadProgress); + adapterProgress(onDownloadProgress); } break; } diff --git a/src/index.ts b/src/index.ts index 8e8ef07..ca5dc2e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,5 +38,6 @@ export { CancelToken, isCancel } from './core/cancel'; export { default as Axios } from './core/Axios'; export { isAxiosError } from './core/createError'; export { createAdapter } from './adapter'; +export { version } from './version'; export default axios; diff --git a/src/version.ts b/src/version.ts new file mode 100644 index 0000000..8d0cf54 --- /dev/null +++ b/src/version.ts @@ -0,0 +1 @@ +export const version = '2.3.0';