From 6f7208afa720aadb7dd69f120cf03f3254296da1 Mon Sep 17 00:00:00 2001 From: wtto00 Date: Fri, 20 Sep 2024 00:23:04 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20uniapp=E6=96=B0=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E8=BF=90=E8=A1=8C=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 218 ++++++++++++------------- docs/advanced/handling-errors.md | 22 +-- packages/core/package.json | 3 +- packages/core/src/adapters/download.ts | 2 +- packages/core/src/adapters/request.ts | 2 +- packages/core/src/adapters/upload.ts | 2 +- pnpm-lock.yaml | 33 ++-- 7 files changed, 146 insertions(+), 136 deletions(-) diff --git a/README.md b/README.md index 663e895..f1cbfd3 100644 --- a/README.md +++ b/README.md @@ -108,33 +108,33 @@ #### GET 请求 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 请求特定 ID 的用户数据 -un.get('/user?ID=12345') +un.get("/user?ID=12345") .then((response) => { // 处理响应 - console.log('response', response); + console.log("response", response); }) .catch((error) => { // 处理错误 - console.log('error', error); + console.log("error", error); }) .finally(() => { // 总是会执行 }); // 上述请求和以下等同 -un.get('/user', { +un.get("/user", { params: { - ID: '12345', + ID: "12345", }, }) .then((response) => { - console.log('response', response); + console.log("response", response); }) .catch((error) => { - console.log('error', error); + console.log("error", error); }) .finally(() => { // 总是会执行 @@ -146,11 +146,11 @@ un.get('/user', { #### 使用 async/await 的 GET 请求 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; async function getUser() { try { - const response = await un.get('/user?ID=12345'); + const response = await un.get("/user?ID=12345"); console.log(response); } catch (error) { console.error(error); @@ -161,11 +161,11 @@ async function getUser() { #### POST 请求 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.post('/user', { - firstName: 'Fred', - lastName: 'Flintstone', +un.post("/user", { + firstName: "Fred", + lastName: "Flintstone", }) .then(function (response) { console.log(response); @@ -179,14 +179,14 @@ un.post('/user', { #### 并发请求 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; function getUserAccount() { - return un.get('/user/12345'); + return un.get("/user/12345"); } function getUserPermissions() { - return un.get('/user/12345/permissions'); + return un.get("/user/12345/permissions"); } Promise.all([getUserAccount(), getUserPermissions()]).then((responses) => { @@ -206,15 +206,15 @@ Promise.all([getUserAccount(), getUserPermissions()]).then((responses) => { #### `un(config)` ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 发起 POST 请求 un({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -222,10 +222,10 @@ un({ #### `un(url[, config])` ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 发起 GET 请求（默认请求方法） -un('/user/12345'); +un("/user/12345"); ``` #### 请求别名 @@ -252,12 +252,12 @@ un('/user/12345'); #### `un.create([config])` ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; const instance = un.create({ - baseUrl: 'https://some-domain.com/api/', + baseUrl: "https://some-domain.com/api/", timeout: 1000, - headers: { 'X-Custom-Header': 'foobar' }, + headers: { "X-Custom-Header": "foobar" }, }); ``` @@ -541,18 +541,18 @@ const instance = un.create({ 当使用 then 时，你将接收如下响应： ```typescript -un.get('/user/12345').then((response) => { - console.log('errMsg', response?.errMsg); - console.log('errno', response?.errno); - console.log('profile', response?.profile); - console.log('config', response?.config); - console.log('status', response?.status); - console.log('statusText', response?.statusText); - console.log('headers', response?.headers); - console.log('data', response?.data); - console.log('cookies', response?.cookies); - console.log('tmpFilePath', response?.tmpFilePath); - console.log('filePath', response?.filePath); +un.get("/user/12345").then((response) => { + console.log("errMsg", response?.errMsg); + console.log("errno", response?.errno); + console.log("profile", response?.profile); + console.log("config", response?.config); + console.log("status", response?.status); + console.log("statusText", response?.statusText); + console.log("headers", response?.headers); + console.log("data", response?.data); + console.log("cookies", response?.cookies); + console.log("tmpFilePath", response?.tmpFilePath); + console.log("filePath", response?.filePath); }); ``` @@ -565,23 +565,23 @@ un.get('/user/12345').then((response) => { #### 全局配置默认值 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.defaults.baseUrl = 'https://api.example.com'; +un.defaults.baseUrl = "https://api.example.com"; ``` #### 自定义实例默认值 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 创建实例时配置默认值 const instance = un.create({ - baseUrl: 'https://api.example.com', + baseUrl: "https://api.example.com", }); // 创建实例后修改默认值 -instance.defaults.baseUrl = 'https://api.another-example.com'; +instance.defaults.baseUrl = "https://api.another-example.com"; ``` #### 配置的优先级 @@ -598,7 +598,7 @@ const instance = un.create(); instance.defaults.timeout = 2500; // 重写此请求的超时时间，因为该请求需要很长时间 -instance.get('/longRequest', { +instance.get("/longRequest", { timeout: 5000, }); ``` @@ -614,7 +614,7 @@ instance.get('/longRequest', { 可以全局添加请求或响应的拦截器。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 添加请求拦截器 un.interceptors.request.use( @@ -625,7 +625,7 @@ un.interceptors.request.use( function (error) { // 对请求错误做些什么 return Promise.reject(error); - }, + } ); // 添加响应拦截器 @@ -639,14 +639,14 @@ un.interceptors.response.use( // 超出 2xx 范围的状态码都会触发该函数 // 对响应错误做点什么 return Promise.reject(error); - }, + } ); ``` 也可以给自定义实例添加请求或响应的拦截器。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 创建实例 const instance = un.create(); @@ -667,7 +667,7 @@ instance.interceptors.response.use(() => { 可以移除单个请求或响应的拦截器。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 添加请求拦截器 const requestInterceptor = un.interceptors.request.use(() => { @@ -687,7 +687,7 @@ un.interceptors.response.eject(responseInterceptor); 也可以移除所有请求或响应的拦截器。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 创建实例 const instance = un.create(); @@ -714,31 +714,31 @@ instance.interceptors.response.clear(); 如果你的请求拦截器是同步的，你可以在选项对象中添加一个标志，告诉 `@uni-helper/uni-network` 同步运行代码，避免请求执行中的任何延迟。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; un.interceptors.request.use( (config) => { - config.headers.test = 'I am only a header!'; + config.headers.test = "I am only a header!"; return config; }, null, - { synchronous: true }, + { synchronous: true } ); ``` 如果你想根据运行时检查来执行某个拦截器，你可以在 `options` 对象中设置 `runWhen` 函数。**当且仅当** `runWhen` 的返回值为 `false` 时，拦截器不会被执行。该函数将和 `config` 对象一起被调用（别忘了，你也可以绑定你自己的参数）。当你有一个只需要在特定时间运行的异步请求拦截器时，这可能会很方便。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -const onGetCall = (config) => config.method.toUpperCase() === 'GET'; +const onGetCall = (config) => config.method.toUpperCase() === "GET"; un.interceptors.request.use( (config) => { - config.headers.test = 'special get headers'; + config.headers.test = "special get headers"; return config; }, null, - { runWhen: onGetCall }, + { runWhen: onGetCall } ); ``` @@ -759,9 +759,9 @@ un.interceptors.request.use( 默认把每一个返回的状态代码不在 2xx 范围内的响应视为错误。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { if (error.response) { // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围 console.log(error.response.data); @@ -773,7 +773,7 @@ un.get('/user/12345').catch((error) => { console.log(error.task); } else { // 发送请求时出了点问题 - console.log('Error', error.message); + console.log("Error", error.message); } console.log(error.config); }); @@ -782,21 +782,21 @@ un.get('/user/12345').catch((error) => { 使用 `validateStatus` 配置选项，可以自定义抛出错误的 HTTP code。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.get('/user/12345', { +un.get("/user/12345", { validateStatus: (status) => { return status < 500; // 处理状态码小于 500 的情况 }, }); ``` -如果你追求语义化，可以使用导出的和挂载的状态码、[statuses](https://github.com/jshttp/statuses)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 +如果你追求语义化，可以使用导出的和挂载的状态码、[statuses-es](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 ```typescript -import { un, HttpStatusCode } from '@uni-helper/uni-network'; +import { un, HttpStatusCode } from "@uni-helper/uni-network"; -un.get('/user/12345', { +un.get("/user/12345", { validateStatus: (status) => { return status < HttpStatusCode.InternalServerError; // 处理状态码小于 500 的情况 // return status < un.HttpStatusCode.InternalServerError; // 也可以使用挂载在 un 上的状态码 @@ -807,7 +807,7 @@ un.get('/user/12345', { 使用 `toJSON` 可以获取更多关于 HTTP 错误的信息。 ```typescript -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { console.log(error.toJSON()); }); ``` @@ -815,9 +815,9 @@ un.get('/user/12345').catch((error) => { 如果需要针对 `UnError` 和非 `UnError` 做处理，可以使用导出的 `isUnError` 方法判断。 ```typescript -import { un, isUnError } from '@uni-helper/uni-network'; +import { un, isUnError } from "@uni-helper/uni-network"; -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { if (isUnError(error)) { /* ... */ } else { @@ -851,8 +851,8 @@ un.get('/user/12345').catch((error) => { ``` ```typescript -import { un } from '@uni-helper/uni-network'; -import AbortController from 'abort-controller/dist/abort-controller'; +import { un } from "@uni-helper/uni-network"; +import AbortController from "abort-controller/dist/abort-controller"; // ❌ 错误做法 1 // import AbortController from 'abort-controller'; // ❌ 错误做法 2 @@ -860,7 +860,7 @@ import AbortController from 'abort-controller/dist/abort-controller'; const controller = new AbortController(); -un.get('/foo/bar', { +un.get("/foo/bar", { signal: controller.signal, }).then(function (response) { //... @@ -874,43 +874,43 @@ controller.abort(); 你也可以使用 `CancelToken` 来取消请求。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; const CancelToken = un.CancelToken; const source = CancelToken.source(); -un.get('/user/12345', { +un.get("/user/12345", { cancelToken: source.token, }).catch(function (thrown) { if (un.isUnCancel(thrown)) { - console.log('Request canceled', thrown.message); + console.log("Request canceled", thrown.message); } else { // 处理错误 } }); un.post( - '/user/12345', + "/user/12345", { - name: 'new name', + name: "new name", }, { cancelToken: source.token, - }, + } ); // 取消请求（信息是可选的） -source.cancel('Operation canceled by the user.'); +source.cancel("Operation canceled by the user."); ``` 你也可以通过向 `CancelToken` 构造函数传递一个执行函数来创建一个 `CancelToken` 实例。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; const CancelToken = un.CancelToken; let cancel; -un.get('/user/12345', { +un.get("/user/12345", { cancelToken: new CancelToken(function executor(c) { cancel = c; }), @@ -931,17 +931,17 @@ cancel(); 最常见的一个类型问题是，调用 API 时得不到响应数据和发送数据的类型。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // response 的类型是 UnResponse // response.data 的类型是 UnData，你希望是 Record const response = await un({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", // 以下 data 的类型是 UnData，你希望是 Record data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -949,7 +949,7 @@ const response = await un({ 这可以通过设置两个范型类型来解决，两个范型类型依次分别对应响应数据和发送数据的类型。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // response 的类型是 UnResponse, Record> // response.data 的类型是 Record @@ -957,12 +957,12 @@ const response = await un< Record, // 对应 response.data 类型 Record // 对应传参中 data 类型 >({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", // 以下 data 的类型是 Record data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -970,7 +970,7 @@ const response = await un< 而另一个常见的类型问题是，使用响应拦截器后响应类型不正确。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -978,12 +978,12 @@ un.interceptors.response.use((response) => response.data); // response 的类型是 UnResponse，你希望是 Record // response.data 的类型是 UnData，你希望是 Record const response = await un({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", // 以下 data 的类型是 UnData，你希望是 Record data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -991,7 +991,7 @@ const response = await un({ 这需要设置三个范型类型来解决，三个范型类型依次分别对应响应数据、发送数据、响应的类型。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -1003,12 +1003,12 @@ const response = await un< Record, // 对应传参中 data 类型 Record // 对应 response 类型 >({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", // 以下 data 的类型是 Record data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -1018,7 +1018,7 @@ const response = await un< 你可以从 `@uni-helper/uni-network` 中导入 `UnData` 以保持前两个范型类型的默认值。 ```typescript -import { un, type UnData } from '@uni-helper/uni-network'; +import { un, type UnData } from "@uni-helper/uni-network"; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -1030,12 +1030,12 @@ const response = await un< UnData, // 对应传参中 data 类型 Record // 对应 response 类型 >({ - method: 'post', - url: '/user/12345', + method: "post", + url: "/user/12345", // 以下 data 的类型是 UnData data: { - firstName: 'Fred', - lastName: 'Flintstone', + firstName: "Fred", + lastName: "Flintstone", }, }); ``` @@ -1065,14 +1065,14 @@ const response = await un< 在某些情况下，你可能不希望响应失败抛出错误，这时候可以使用响应拦截器来处理。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; // 添加响应拦截器 un.interceptors.response.use( (response) => response, // 直接返回错误，不再需要使用 catch 来捕获 // 需要注意返回值可能是 UnError 类型 - (error) => error, + (error) => error ); ``` @@ -1117,7 +1117,7 @@ un.interceptors.response.use( 从 `@uni-helper/uni-network/composables` 中导入组合式函数后即可使用。 ```typescript -import { useUn } from '@uni-helper/uni-network/composables'; +import { useUn } from "@uni-helper/uni-network/composables"; ``` `useUn` 的用法和 [useAxios](https://vueuse.org/integrations/useaxios/) 几乎完全一致。这里不再赘述。 diff --git a/docs/advanced/handling-errors.md b/docs/advanced/handling-errors.md index da37ee7..27a5c27 100644 --- a/docs/advanced/handling-errors.md +++ b/docs/advanced/handling-errors.md @@ -3,9 +3,9 @@ 默认把每一个返回的状态代码不在 `2xx` 范围内的响应视为错误。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { if (error.response) { // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围 console.log(error.response.data); @@ -17,7 +17,7 @@ un.get('/user/12345').catch((error) => { console.log(error.task); } else { // 发送请求时出了点问题 - console.log('Error', error.message); + console.log("Error", error.message); } console.log(error.config); }); @@ -26,21 +26,21 @@ un.get('/user/12345').catch((error) => { 使用 `validateStatus` 配置选项，可以自定义抛出错误的 HTTP code。 ```typescript -import { un } from '@uni-helper/uni-network'; +import { un } from "@uni-helper/uni-network"; -un.get('/user/12345', { +un.get("/user/12345", { validateStatus: (status) => { return status < 500; // 处理状态码小于 500 的情况 }, }); ``` -如果你追求语义化，可以使用导出的和挂载的状态码、[statuses](https://github.com/jshttp/statuses)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 +如果你追求语义化，可以使用导出的和挂载的状态码、[statuses-es](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 ```typescript -import { un, HttpStatusCode } from '@uni-helper/uni-network'; +import { un, HttpStatusCode } from "@uni-helper/uni-network"; -un.get('/user/12345', { +un.get("/user/12345", { validateStatus: (status) => { return status < HttpStatusCode.InternalServerError; // 处理状态码小于 500 的情况 // return status < un.HttpStatusCode.InternalServerError; // 也可以使用挂载在 un 上的状态码 @@ -51,7 +51,7 @@ un.get('/user/12345', { 使用 `toJSON` 可以获取更多关于 HTTP 错误的信息。 ```typescript -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { console.log(error.toJSON()); }); ``` @@ -59,9 +59,9 @@ un.get('/user/12345').catch((error) => { 如果需要针对 `UnError` 和非 `UnError` 做处理，可以使用导出的 `isUnError` 方法判断。 ```typescript -import { un, isUnError } from '@uni-helper/uni-network'; +import { un, isUnError } from "@uni-helper/uni-network"; -un.get('/user/12345').catch((error) => { +un.get("/user/12345").catch((error) => { if (isUnError(error)) { /* ... */ } else { diff --git a/packages/core/package.json b/packages/core/package.json index 84e42bc..be51631 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -73,10 +73,9 @@ "dependencies": { "@dcloudio/types": "^3.4.8", "@types/lodash.merge": "^4.6.9", - "@types/statuses": "^2.0.5", "fast-querystring": "^1.1.2", "lodash.merge": "^4.6.2", - "statuses": "^2.0.1", + "statuses-es": "^2.0.6", "vue-demi": "^0.14.8" }, "devDependencies": { diff --git a/packages/core/src/adapters/download.ts b/packages/core/src/adapters/download.ts index 131ae1e..a3fcbfe 100644 --- a/packages/core/src/adapters/download.ts +++ b/packages/core/src/adapters/download.ts @@ -1,4 +1,4 @@ -import statuses from "statuses"; +import statuses from "statuses-es"; import type { UnCancelTokenListener } from "../core/UnCancelToken"; import { UnCanceledError } from "../core/UnCanceledError"; import { settle } from "../core/settle"; diff --git a/packages/core/src/adapters/request.ts b/packages/core/src/adapters/request.ts index d5941a1..75e81d7 100644 --- a/packages/core/src/adapters/request.ts +++ b/packages/core/src/adapters/request.ts @@ -1,4 +1,4 @@ -import statuses from "statuses"; +import statuses from "statuses-es"; import type { UnCancelTokenListener } from "../core/UnCancelToken"; import { UnCanceledError } from "../core/UnCanceledError"; import { settle } from "../core/settle"; diff --git a/packages/core/src/adapters/upload.ts b/packages/core/src/adapters/upload.ts index d0d6c8a..3c61a38 100644 --- a/packages/core/src/adapters/upload.ts +++ b/packages/core/src/adapters/upload.ts @@ -1,4 +1,4 @@ -import statuses from "statuses"; +import statuses from "statuses-es"; import type { UnCancelTokenListener } from "../core/UnCancelToken"; import { UnCanceledError } from "../core/UnCanceledError"; import { settle } from "../core/settle"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac09d21..86f9257 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,9 +80,6 @@ importers: '@types/lodash.merge': specifier: ^4.6.9 version: 4.6.9 - '@types/statuses': - specifier: ^2.0.5 - version: 2.0.5 '@vue/composition-api': specifier: ^1.0.0 version: 1.7.2(vue@3.4.38(typescript@5.5.4)) @@ -92,9 +89,9 @@ importers: lodash.merge: specifier: ^4.6.2 version: 4.6.2 - statuses: - specifier: ^2.0.1 - version: 2.0.1 + statuses-es: + specifier: ^2.0.6 + version: 2.0.6 vue-demi: specifier: ^0.14.8 version: 0.14.10(@vue/composition-api@1.7.2(vue@3.4.38(typescript@5.5.4)))(vue@3.4.38(typescript@5.5.4)) @@ -906,24 +903,28 @@ packages: engines: {node: '>=14.21.3'} cpu: [arm64] os: [linux] + libc: [musl] '@biomejs/cli-linux-arm64@1.8.3': resolution: {integrity: sha512-fed2ji8s+I/m8upWpTJGanqiJ0rnlHOK3DdxsyVLZQ8ClY6qLuPc9uehCREBifRJLl/iJyQpHIRufLDeotsPtw==} engines: {node: '>=14.21.3'} cpu: [arm64] os: [linux] + libc: [glibc] '@biomejs/cli-linux-x64-musl@1.8.3': resolution: {integrity: sha512-UHrGJX7PrKMKzPGoEsooKC9jXJMa28TUSMjcIlbDnIO4EAavCoVmNQaIuUSH0Ls2mpGMwUIf+aZJv657zfWWjA==} engines: {node: '>=14.21.3'} cpu: [x64] os: [linux] + libc: [musl] '@biomejs/cli-linux-x64@1.8.3': resolution: {integrity: sha512-I8G2QmuE1teISyT8ie1HXsjFRz9L1m5n83U1O6m30Kw+kPMPSKjag6QGUn+sXT8V+XWIZxFFBoTDEDZW2KPDDw==} engines: {node: '>=14.21.3'} cpu: [x64] os: [linux] + libc: [glibc] '@biomejs/cli-win32-arm64@1.8.3': resolution: {integrity: sha512-J+Hu9WvrBevfy06eU1Na0lpc7uR9tibm9maHynLIoAjLZpQU3IW+OKHUtyL8p6/3pT2Ju5t5emReeIS2SAxhkQ==} @@ -2130,46 +2131,55 @@ packages: resolution: {integrity: sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.21.2': resolution: {integrity: sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.21.2': resolution: {integrity: sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.21.2': resolution: {integrity: sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/rollup-linux-powerpc64le-gnu@4.21.2': resolution: {integrity: sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.21.2': resolution: {integrity: sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-s390x-gnu@4.21.2': resolution: {integrity: sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.21.2': resolution: {integrity: sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/rollup-linux-x64-musl@4.21.2': resolution: {integrity: sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.21.2': resolution: {integrity: sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==} @@ -2285,9 +2295,6 @@ packages: '@types/stack-utils@2.0.3': resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} - '@types/statuses@2.0.5': - resolution: {integrity: sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==} - '@types/ungap__url-search-params@0.1.2': resolution: {integrity: sha512-2WalOb9LMBR83pNXKHl3Uv8kk/uUHPXHqnENizNOvsnJ806EbcRuBAYg/WT94bzv6EK0Oo3WTiAZx5L7W/H2JQ==} @@ -5402,6 +5409,10 @@ packages: stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + statuses-es@2.0.6: + resolution: {integrity: sha512-MNbejKdhYUwxsiupoRli1XOb9WSaGLtoE6130mfjAXjHp5AV3cCdCTYzRbIV1qXLXq1uRHvs5J9jmR3tPZKDqw==} + engines: {node: '>= 0.8'} + statuses@2.0.1: resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==} engines: {node: '>= 0.8'} @@ -8979,8 +8990,6 @@ snapshots: '@types/stack-utils@2.0.3': {} - '@types/statuses@2.0.5': {} - '@types/ungap__url-search-params@0.1.2': {} '@types/unist@3.0.3': {} @@ -12471,6 +12480,8 @@ snapshots: stackback@0.0.2: {} + statuses-es@2.0.6: {} + statuses@2.0.1: {} std-env@3.7.0: {} From fbd1046d098c7af054a884e29979388c6f893d3a Mon Sep 17 00:00:00 2001 From: wtto00 Date: Fri, 20 Sep 2024 00:29:12 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20md=E8=87=AA=E5=8A=A8=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=E5=8C=96=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 272 +++++++++++++++---------------- docs/advanced/handling-errors.md | 20 +-- 2 files changed, 146 insertions(+), 146 deletions(-) diff --git a/README.md b/README.md index f1cbfd3..46a691d 100644 --- a/README.md +++ b/README.md @@ -108,33 +108,33 @@ #### GET 请求 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 请求特定 ID 的用户数据 -un.get("/user?ID=12345") +un.get('/user?ID=12345') .then((response) => { // 处理响应 - console.log("response", response); + console.log('response', response); }) .catch((error) => { // 处理错误 - console.log("error", error); + console.log('error', error); }) .finally(() => { // 总是会执行 }); // 上述请求和以下等同 -un.get("/user", { +un.get('/user', { params: { - ID: "12345", + ID: '12345', }, }) .then((response) => { - console.log("response", response); + console.log('response', response); }) .catch((error) => { - console.log("error", error); + console.log('error', error); }) .finally(() => { // 总是会执行 @@ -146,11 +146,11 @@ un.get("/user", { #### 使用 async/await 的 GET 请求 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; async function getUser() { try { - const response = await un.get("/user?ID=12345"); + const response = await un.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); @@ -161,11 +161,11 @@ async function getUser() { #### POST 请求 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.post("/user", { - firstName: "Fred", - lastName: "Flintstone", +un.post('/user', { + firstName: 'Fred', + lastName: 'Flintstone', }) .then(function (response) { console.log(response); @@ -179,14 +179,14 @@ un.post("/user", { #### 并发请求 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; function getUserAccount() { - return un.get("/user/12345"); + return un.get('/user/12345'); } function getUserPermissions() { - return un.get("/user/12345/permissions"); + return un.get('/user/12345/permissions'); } Promise.all([getUserAccount(), getUserPermissions()]).then((responses) => { @@ -206,15 +206,15 @@ Promise.all([getUserAccount(), getUserPermissions()]).then((responses) => { #### `un(config)` ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 发起 POST 请求 un({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -222,10 +222,10 @@ un({ #### `un(url[, config])` ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 发起 GET 请求（默认请求方法） -un("/user/12345"); +un('/user/12345'); ``` #### 请求别名 @@ -252,12 +252,12 @@ un("/user/12345"); #### `un.create([config])` ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; const instance = un.create({ - baseUrl: "https://some-domain.com/api/", + baseUrl: 'https://some-domain.com/api/', timeout: 1000, - headers: { "X-Custom-Header": "foobar" }, + headers: { 'X-Custom-Header': 'foobar' }, }); ``` @@ -541,18 +541,18 @@ const instance = un.create({ 当使用 then 时，你将接收如下响应： ```typescript -un.get("/user/12345").then((response) => { - console.log("errMsg", response?.errMsg); - console.log("errno", response?.errno); - console.log("profile", response?.profile); - console.log("config", response?.config); - console.log("status", response?.status); - console.log("statusText", response?.statusText); - console.log("headers", response?.headers); - console.log("data", response?.data); - console.log("cookies", response?.cookies); - console.log("tmpFilePath", response?.tmpFilePath); - console.log("filePath", response?.filePath); +un.get('/user/12345').then((response) => { + console.log('errMsg', response?.errMsg); + console.log('errno', response?.errno); + console.log('profile', response?.profile); + console.log('config', response?.config); + console.log('status', response?.status); + console.log('statusText', response?.statusText); + console.log('headers', response?.headers); + console.log('data', response?.data); + console.log('cookies', response?.cookies); + console.log('tmpFilePath', response?.tmpFilePath); + console.log('filePath', response?.filePath); }); ``` @@ -565,23 +565,23 @@ un.get("/user/12345").then((response) => { #### 全局配置默认值 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.defaults.baseUrl = "https://api.example.com"; +un.defaults.baseUrl = 'https://api.example.com'; ``` #### 自定义实例默认值 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 创建实例时配置默认值 const instance = un.create({ - baseUrl: "https://api.example.com", + baseUrl: 'https://api.example.com', }); // 创建实例后修改默认值 -instance.defaults.baseUrl = "https://api.another-example.com"; +instance.defaults.baseUrl = 'https://api.another-example.com'; ``` #### 配置的优先级 @@ -598,7 +598,7 @@ const instance = un.create(); instance.defaults.timeout = 2500; // 重写此请求的超时时间，因为该请求需要很长时间 -instance.get("/longRequest", { +instance.get('/longRequest', { timeout: 5000, }); ``` @@ -614,7 +614,7 @@ instance.get("/longRequest", { 可以全局添加请求或响应的拦截器。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 添加请求拦截器 un.interceptors.request.use( @@ -625,7 +625,7 @@ un.interceptors.request.use( function (error) { // 对请求错误做些什么 return Promise.reject(error); - } + }, ); // 添加响应拦截器 @@ -639,14 +639,14 @@ un.interceptors.response.use( // 超出 2xx 范围的状态码都会触发该函数 // 对响应错误做点什么 return Promise.reject(error); - } + }, ); ``` 也可以给自定义实例添加请求或响应的拦截器。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 创建实例 const instance = un.create(); @@ -667,7 +667,7 @@ instance.interceptors.response.use(() => { 可以移除单个请求或响应的拦截器。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 添加请求拦截器 const requestInterceptor = un.interceptors.request.use(() => { @@ -687,7 +687,7 @@ un.interceptors.response.eject(responseInterceptor); 也可以移除所有请求或响应的拦截器。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 创建实例 const instance = un.create(); @@ -714,31 +714,31 @@ instance.interceptors.response.clear(); 如果你的请求拦截器是同步的，你可以在选项对象中添加一个标志，告诉 `@uni-helper/uni-network` 同步运行代码，避免请求执行中的任何延迟。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; un.interceptors.request.use( (config) => { - config.headers.test = "I am only a header!"; + config.headers.test = 'I am only a header!'; return config; }, null, - { synchronous: true } + { synchronous: true }, ); ``` 如果你想根据运行时检查来执行某个拦截器，你可以在 `options` 对象中设置 `runWhen` 函数。**当且仅当** `runWhen` 的返回值为 `false` 时，拦截器不会被执行。该函数将和 `config` 对象一起被调用（别忘了，你也可以绑定你自己的参数）。当你有一个只需要在特定时间运行的异步请求拦截器时，这可能会很方便。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -const onGetCall = (config) => config.method.toUpperCase() === "GET"; +const onGetCall = (config) => config.method.toUpperCase() === 'GET'; un.interceptors.request.use( (config) => { - config.headers.test = "special get headers"; + config.headers.test = 'special get headers'; return config; }, null, - { runWhen: onGetCall } + { runWhen: onGetCall }, ); ``` @@ -759,9 +759,9 @@ un.interceptors.request.use( 默认把每一个返回的状态代码不在 2xx 范围内的响应视为错误。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { if (error.response) { // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围 console.log(error.response.data); @@ -773,7 +773,7 @@ un.get("/user/12345").catch((error) => { console.log(error.task); } else { // 发送请求时出了点问题 - console.log("Error", error.message); + console.log('Error', error.message); } console.log(error.config); }); @@ -782,21 +782,21 @@ un.get("/user/12345").catch((error) => { 使用 `validateStatus` 配置选项，可以自定义抛出错误的 HTTP code。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.get("/user/12345", { +un.get('/user/12345', { validateStatus: (status) => { return status < 500; // 处理状态码小于 500 的情况 }, }); ``` -如果你追求语义化，可以使用导出的和挂载的状态码、[statuses-es](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 +如果你追求语义化，可以使用导出的和挂载的状态码、[statuses](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 ```typescript -import { un, HttpStatusCode } from "@uni-helper/uni-network"; +import { un, HttpStatusCode } from '@uni-helper/uni-network'; -un.get("/user/12345", { +un.get('/user/12345', { validateStatus: (status) => { return status < HttpStatusCode.InternalServerError; // 处理状态码小于 500 的情况 // return status < un.HttpStatusCode.InternalServerError; // 也可以使用挂载在 un 上的状态码 @@ -807,7 +807,7 @@ un.get("/user/12345", { 使用 `toJSON` 可以获取更多关于 HTTP 错误的信息。 ```typescript -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { console.log(error.toJSON()); }); ``` @@ -815,9 +815,9 @@ un.get("/user/12345").catch((error) => { 如果需要针对 `UnError` 和非 `UnError` 做处理，可以使用导出的 `isUnError` 方法判断。 ```typescript -import { un, isUnError } from "@uni-helper/uni-network"; +import { un, isUnError } from '@uni-helper/uni-network'; -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { if (isUnError(error)) { /* ... */ } else { @@ -851,8 +851,8 @@ un.get("/user/12345").catch((error) => { ``` ```typescript -import { un } from "@uni-helper/uni-network"; -import AbortController from "abort-controller/dist/abort-controller"; +import { un } from '@uni-helper/uni-network'; +import AbortController from 'abort-controller/dist/abort-controller'; // ❌ 错误做法 1 // import AbortController from 'abort-controller'; // ❌ 错误做法 2 @@ -860,7 +860,7 @@ import AbortController from "abort-controller/dist/abort-controller"; const controller = new AbortController(); -un.get("/foo/bar", { +un.get('/foo/bar', { signal: controller.signal, }).then(function (response) { //... @@ -874,43 +874,43 @@ controller.abort(); 你也可以使用 `CancelToken` 来取消请求。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; const CancelToken = un.CancelToken; const source = CancelToken.source(); -un.get("/user/12345", { +un.get('/user/12345', { cancelToken: source.token, }).catch(function (thrown) { if (un.isUnCancel(thrown)) { - console.log("Request canceled", thrown.message); + console.log('Request canceled', thrown.message); } else { // 处理错误 } }); un.post( - "/user/12345", + '/user/12345', { - name: "new name", + name: 'new name', }, { cancelToken: source.token, - } + }, ); // 取消请求（信息是可选的） -source.cancel("Operation canceled by the user."); +source.cancel('Operation canceled by the user.'); ``` 你也可以通过向 `CancelToken` 构造函数传递一个执行函数来创建一个 `CancelToken` 实例。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; const CancelToken = un.CancelToken; let cancel; -un.get("/user/12345", { +un.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { cancel = c; }), @@ -931,17 +931,17 @@ cancel(); 最常见的一个类型问题是，调用 API 时得不到响应数据和发送数据的类型。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // response 的类型是 UnResponse // response.data 的类型是 UnData，你希望是 Record const response = await un({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', // 以下 data 的类型是 UnData，你希望是 Record data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -949,7 +949,7 @@ const response = await un({ 这可以通过设置两个范型类型来解决，两个范型类型依次分别对应响应数据和发送数据的类型。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // response 的类型是 UnResponse, Record> // response.data 的类型是 Record @@ -957,12 +957,12 @@ const response = await un< Record, // 对应 response.data 类型 Record // 对应传参中 data 类型 >({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', // 以下 data 的类型是 Record data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -970,7 +970,7 @@ const response = await un< 而另一个常见的类型问题是，使用响应拦截器后响应类型不正确。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -978,12 +978,12 @@ un.interceptors.response.use((response) => response.data); // response 的类型是 UnResponse，你希望是 Record // response.data 的类型是 UnData，你希望是 Record const response = await un({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', // 以下 data 的类型是 UnData，你希望是 Record data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -991,7 +991,7 @@ const response = await un({ 这需要设置三个范型类型来解决，三个范型类型依次分别对应响应数据、发送数据、响应的类型。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -1003,12 +1003,12 @@ const response = await un< Record, // 对应传参中 data 类型 Record // 对应 response 类型 >({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', // 以下 data 的类型是 Record data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -1018,7 +1018,7 @@ const response = await un< 你可以从 `@uni-helper/uni-network` 中导入 `UnData` 以保持前两个范型类型的默认值。 ```typescript -import { un, type UnData } from "@uni-helper/uni-network"; +import { un, type UnData } from '@uni-helper/uni-network'; // 添加响应拦截器直接返回 response.data un.interceptors.response.use((response) => response.data); @@ -1030,12 +1030,12 @@ const response = await un< UnData, // 对应传参中 data 类型 Record // 对应 response 类型 >({ - method: "post", - url: "/user/12345", + method: 'post', + url: '/user/12345', // 以下 data 的类型是 UnData data: { - firstName: "Fred", - lastName: "Flintstone", + firstName: 'Fred', + lastName: 'Flintstone', }, }); ``` @@ -1065,14 +1065,14 @@ const response = await un< 在某些情况下，你可能不希望响应失败抛出错误，这时候可以使用响应拦截器来处理。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; // 添加响应拦截器 un.interceptors.response.use( (response) => response, // 直接返回错误，不再需要使用 catch 来捕获 // 需要注意返回值可能是 UnError 类型 - (error) => error + (error) => error, ); ``` @@ -1117,7 +1117,7 @@ un.interceptors.response.use( 从 `@uni-helper/uni-network/composables` 中导入组合式函数后即可使用。 ```typescript -import { useUn } from "@uni-helper/uni-network/composables"; +import { useUn } from '@uni-helper/uni-network/composables'; ``` `useUn` 的用法和 [useAxios](https://vueuse.org/integrations/useaxios/) 几乎完全一致。这里不再赘述。 @@ -1143,34 +1143,34 @@ import { useUn } from "@uni-helper/uni-network/composables"; 如果你因为某些原因坚持使用 `axios`，你可以查看 [@uni-helper/axios-adapter](https://github.com/uni-helper/axios-adapter) 获取 `adapter` 支持。 以下是 `@uni-helper/uni-network` 与其它一些库的比较。如果你发现这里信息已经过时，欢迎提交 ISSUE 或 PR。 -| | `axios` | `luch-request` | `uni-ajax` | `@uni-helper/uni-network` | +| | `axios` | `luch-request` | `uni-ajax` | `@uni-helper/uni-network` | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 基本信息 | [![npm](https://img.shields.io/npm/v/axios)](https://www.npmjs.com/package/axios) [![npm](https://img.shields.io/npm/dw/axios)](https://www.npmjs.com/package/axios) | [![npm](https://img.shields.io/npm/v/luch-request)](https://www.npmjs.com/package/luch-request) [![npm](https://img.shields.io/npm/dw/luch-request)](https://www.npmjs.com/package/luch-request) | [![npm](https://img.shields.io/npm/v/uni-ajax)](https://www.npmjs.com/package/uni-ajax) [![npm](https://img.shields.io/npm/dw/uni-ajax)](https://www.npmjs.com/package/uni-ajax) | [![npm](https://img.shields.io/npm/v/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) [![npm](https://img.shields.io/npm/dw/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) | -| 开发语言 | JavaScript | JavaScript | JavaScript | TypeScript | -| 类型支持 | `index.d.ts`（没有考虑 `uni-app`） | `index.d.ts`（泛型支持较差） | `index.d.ts` | 包含 | -| 运行环境 | 浏览器和 `Node.js` | `uni-app` | `uni-app` | `uni-app` | -| `Promise` | √ | √ | √ | √ | -| `uni_modules` | × | √ | √ | × | -| `npm` 包 | √ | √ | √ | √ | -| 实例化 | √ | √ | √ | √ | -| 请求说明 | √ | √ | √ | √ | -| 请求头 headers | `AxiosHeaders` | 普通对象 | 普通对象 | 普通对象 | -| 请求参数 params | `AxiosURLSearchParams` | 普通对象 | 普通对象 | 普通对象或 `URLSearchParams` 对象 | -| 请求转换 `transformRequest` | √ | × | × | × | -| 响应说明 | √ | × | √ | √ | -| 响应转换 `transformResponse` | √ | × | × | × | -| 任务说明 | ×（没有考虑 `uni-app`  任务） | × | √（只有 `requestTask`  说明） | √（只有简单说明） | -| 适配器 | √（内置 `xhr` 和 `http`） | × | √ | √ | -| `uni.request` | ×（自行开发，还需要覆写类型） | √ | √ | √ | -| `uni.downloadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | -| `uni.uploadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | -| 请求拦截器 | √ | √ | √ | √ | -| 响应拦截器 | √ | √ | √ | √ | -| 配置说明 | √ | √ | √ | √ | -| 取消请求说明 | √ | × | √ | √ | -| 错误处理说明 | √ | × | √ | √ | -| 测试 | 完善 | 部分 | 无 | 部分 | -| 使用示例 | √ | √ | √ | √ | +| 基本信息 | [![npm](https://img.shields.io/npm/v/axios)](https://www.npmjs.com/package/axios) [![npm](https://img.shields.io/npm/dw/axios)](https://www.npmjs.com/package/axios) | [![npm](https://img.shields.io/npm/v/luch-request)](https://www.npmjs.com/package/luch-request) [![npm](https://img.shields.io/npm/dw/luch-request)](https://www.npmjs.com/package/luch-request) | [![npm](https://img.shields.io/npm/v/uni-ajax)](https://www.npmjs.com/package/uni-ajax) [![npm](https://img.shields.io/npm/dw/uni-ajax)](https://www.npmjs.com/package/uni-ajax) | [![npm](https://img.shields.io/npm/v/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) [![npm](https://img.shields.io/npm/dw/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) | +| 开发语言 | JavaScript | JavaScript | JavaScript | TypeScript | +| 类型支持 | `index.d.ts`（没有考虑 `uni-app`） | `index.d.ts`（泛型支持较差） | `index.d.ts` | 包含 | +| 运行环境 | 浏览器和 `Node.js` | `uni-app` | `uni-app` | `uni-app` | +| `Promise` | √ | √ | √ | √ | +| `uni_modules` | × | √ | √ | × | +| `npm` 包 | √ | √ | √ | √ | +| 实例化 | √ | √ | √ | √ | +| 请求说明 | √ | √ | √ | √ | +| 请求头 headers | `AxiosHeaders` | 普通对象 | 普通对象 | 普通对象 | +| 请求参数 params | `AxiosURLSearchParams` | 普通对象 | 普通对象 | 普通对象或 `URLSearchParams` 对象 | +| 请求转换 `transformRequest` | √ | × | × | × | +| 响应说明 | √ | × | √ | √ | +| 响应转换 `transformResponse` | √ | × | × | × | +| 任务说明 | ×（没有考虑 `uni-app`  任务） | × | √（只有 `requestTask`  说明） | √（只有简单说明） | +| 适配器 | √（内置 `xhr` 和 `http`） | × | √ | √ | +| `uni.request` | ×（自行开发，还需要覆写类型） | √ | √ | √ | +| `uni.downloadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | +| `uni.uploadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | +| 请求拦截器 | √ | √ | √ | √ | +| 响应拦截器 | √ | √ | √ | √ | +| 配置说明 | √ | √ | √ | √ | +| 取消请求说明 | √ | × | √ | √ | +| 错误处理说明 | √ | × | √ | √ | +| 测试 | 完善 | 部分 | 无 | 部分 | +| 使用示例 | √ | √ | √ | √ | ## 资源 diff --git a/docs/advanced/handling-errors.md b/docs/advanced/handling-errors.md index 27a5c27..1aca2b9 100644 --- a/docs/advanced/handling-errors.md +++ b/docs/advanced/handling-errors.md @@ -3,9 +3,9 @@ 默认把每一个返回的状态代码不在 `2xx` 范围内的响应视为错误。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { if (error.response) { // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围 console.log(error.response.data); @@ -17,7 +17,7 @@ un.get("/user/12345").catch((error) => { console.log(error.task); } else { // 发送请求时出了点问题 - console.log("Error", error.message); + console.log('Error', error.message); } console.log(error.config); }); @@ -26,9 +26,9 @@ un.get("/user/12345").catch((error) => { 使用 `validateStatus` 配置选项，可以自定义抛出错误的 HTTP code。 ```typescript -import { un } from "@uni-helper/uni-network"; +import { un } from '@uni-helper/uni-network'; -un.get("/user/12345", { +un.get('/user/12345', { validateStatus: (status) => { return status < 500; // 处理状态码小于 500 的情况 }, @@ -38,9 +38,9 @@ un.get("/user/12345", { 如果你追求语义化，可以使用导出的和挂载的状态码、[statuses-es](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 ```typescript -import { un, HttpStatusCode } from "@uni-helper/uni-network"; +import { un, HttpStatusCode } from '@uni-helper/uni-network'; -un.get("/user/12345", { +un.get('/user/12345', { validateStatus: (status) => { return status < HttpStatusCode.InternalServerError; // 处理状态码小于 500 的情况 // return status < un.HttpStatusCode.InternalServerError; // 也可以使用挂载在 un 上的状态码 @@ -51,7 +51,7 @@ un.get("/user/12345", { 使用 `toJSON` 可以获取更多关于 HTTP 错误的信息。 ```typescript -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { console.log(error.toJSON()); }); ``` @@ -59,9 +59,9 @@ un.get("/user/12345").catch((error) => { 如果需要针对 `UnError` 和非 `UnError` 做处理，可以使用导出的 `isUnError` 方法判断。 ```typescript -import { un, isUnError } from "@uni-helper/uni-network"; +import { un, isUnError } from '@uni-helper/uni-network'; -un.get("/user/12345").catch((error) => { +un.get('/user/12345').catch((error) => { if (isUnError(error)) { /* ... */ } else { From dabadeba39a408d410e67c6ffb6cb085449658d0 Mon Sep 17 00:00:00 2001 From: wtto00 Date: Fri, 20 Sep 2024 00:39:19 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E6=96=87=E4=BB=B6README.md?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=87=AA=E5=8A=A8=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 46a691d..3f8e403 100644 --- a/README.md +++ b/README.md @@ -791,7 +791,7 @@ un.get('/user/12345', { }); ``` -如果你追求语义化，可以使用导出的和挂载的状态码、[statuses](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 +如果你追求语义化，可以使用导出的和挂载的状态码、[statuses-es](https://github.com/esm-ts/statuses-es)、[http-status-codes](https://github.com/prettymuchbryce/http-status-codes) 或 [node-http-status](https://github.com/adaltas/node-http-status)。 ```typescript import { un, HttpStatusCode } from '@uni-helper/uni-network'; @@ -1143,34 +1143,34 @@ import { useUn } from '@uni-helper/uni-network/composables'; 如果你因为某些原因坚持使用 `axios`，你可以查看 [@uni-helper/axios-adapter](https://github.com/uni-helper/axios-adapter) 获取 `adapter` 支持。 以下是 `@uni-helper/uni-network` 与其它一些库的比较。如果你发现这里信息已经过时，欢迎提交 ISSUE 或 PR。 -| | `axios` | `luch-request` | `uni-ajax` | `@uni-helper/uni-network` | +| | `axios` | `luch-request` | `uni-ajax` | `@uni-helper/uni-network` | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 基本信息 | [![npm](https://img.shields.io/npm/v/axios)](https://www.npmjs.com/package/axios) [![npm](https://img.shields.io/npm/dw/axios)](https://www.npmjs.com/package/axios) | [![npm](https://img.shields.io/npm/v/luch-request)](https://www.npmjs.com/package/luch-request) [![npm](https://img.shields.io/npm/dw/luch-request)](https://www.npmjs.com/package/luch-request) | [![npm](https://img.shields.io/npm/v/uni-ajax)](https://www.npmjs.com/package/uni-ajax) [![npm](https://img.shields.io/npm/dw/uni-ajax)](https://www.npmjs.com/package/uni-ajax) | [![npm](https://img.shields.io/npm/v/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) [![npm](https://img.shields.io/npm/dw/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) | -| 开发语言 | JavaScript | JavaScript | JavaScript | TypeScript | -| 类型支持 | `index.d.ts`（没有考虑 `uni-app`） | `index.d.ts`（泛型支持较差） | `index.d.ts` | 包含 | -| 运行环境 | 浏览器和 `Node.js` | `uni-app` | `uni-app` | `uni-app` | -| `Promise` | √ | √ | √ | √ | -| `uni_modules` | × | √ | √ | × | -| `npm` 包 | √ | √ | √ | √ | -| 实例化 | √ | √ | √ | √ | -| 请求说明 | √ | √ | √ | √ | -| 请求头 headers | `AxiosHeaders` | 普通对象 | 普通对象 | 普通对象 | -| 请求参数 params | `AxiosURLSearchParams` | 普通对象 | 普通对象 | 普通对象或 `URLSearchParams` 对象 | -| 请求转换 `transformRequest` | √ | × | × | × | -| 响应说明 | √ | × | √ | √ | -| 响应转换 `transformResponse` | √ | × | × | × | -| 任务说明 | ×（没有考虑 `uni-app`  任务） | × | √（只有 `requestTask`  说明） | √（只有简单说明） | -| 适配器 | √（内置 `xhr` 和 `http`） | × | √ | √ | -| `uni.request` | ×（自行开发，还需要覆写类型） | √ | √ | √ | -| `uni.downloadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | -| `uni.uploadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | -| 请求拦截器 | √ | √ | √ | √ | -| 响应拦截器 | √ | √ | √ | √ | -| 配置说明 | √ | √ | √ | √ | -| 取消请求说明 | √ | × | √ | √ | -| 错误处理说明 | √ | × | √ | √ | -| 测试 | 完善 | 部分 | 无 | 部分 | -| 使用示例 | √ | √ | √ | √ | +| 基本信息 | [![npm](https://img.shields.io/npm/v/axios)](https://www.npmjs.com/package/axios) [![npm](https://img.shields.io/npm/dw/axios)](https://www.npmjs.com/package/axios) | [![npm](https://img.shields.io/npm/v/luch-request)](https://www.npmjs.com/package/luch-request) [![npm](https://img.shields.io/npm/dw/luch-request)](https://www.npmjs.com/package/luch-request) | [![npm](https://img.shields.io/npm/v/uni-ajax)](https://www.npmjs.com/package/uni-ajax) [![npm](https://img.shields.io/npm/dw/uni-ajax)](https://www.npmjs.com/package/uni-ajax) | [![npm](https://img.shields.io/npm/v/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) [![npm](https://img.shields.io/npm/dw/@uni-helper/uni-network)](https://www.npmjs.com/package/@uni-helper/uni-network) | +| 开发语言 | JavaScript | JavaScript | JavaScript | TypeScript | +| 类型支持 | `index.d.ts`（没有考虑 `uni-app`） | `index.d.ts`（泛型支持较差） | `index.d.ts` | 包含 | +| 运行环境 | 浏览器和 `Node.js` | `uni-app` | `uni-app` | `uni-app` | +| `Promise` | √ | √ | √ | √ | +| `uni_modules` | × | √ | √ | × | +| `npm` 包 | √ | √ | √ | √ | +| 实例化 | √ | √ | √ | √ | +| 请求说明 | √ | √ | √ | √ | +| 请求头 headers | `AxiosHeaders` | 普通对象 | 普通对象 | 普通对象 | +| 请求参数 params | `AxiosURLSearchParams` | 普通对象 | 普通对象 | 普通对象或 `URLSearchParams` 对象 | +| 请求转换 `transformRequest` | √ | × | × | × | +| 响应说明 | √ | × | √ | √ | +| 响应转换 `transformResponse` | √ | × | × | × | +| 任务说明 | ×（没有考虑 `uni-app`  任务） | × | √（只有 `requestTask`  说明） | √（只有简单说明） | +| 适配器 | √（内置 `xhr` 和 `http`） | × | √ | √ | +| `uni.request` | ×（自行开发，还需要覆写类型） | √ | √ | √ | +| `uni.downloadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | +| `uni.uploadFile` | ×（自行开发，还需要覆写类型） | √ | ×（自行开发，还需要覆写类型） | √ | +| 请求拦截器 | √ | √ | √ | √ | +| 响应拦截器 | √ | √ | √ | √ | +| 配置说明 | √ | √ | √ | √ | +| 取消请求说明 | √ | × | √ | √ | +| 错误处理说明 | √ | × | √ | √ | +| 测试 | 完善 | 部分 | 无 | 部分 | +| 使用示例 | √ | √ | √ | √ | ## 资源