Skip to content

Commit

Permalink
docs: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoxian521
xiaoxian521 committed Jun 5, 2024
1 parent 9883482 commit 1b6d4ad
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions docs/01.指南/01.指南/08.http请求.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ permalink: /pages/request/

### 基础用法

① 来到 [mock](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/mock) 文件存放目录，比如添加 `login` 接口，采用 `post` 请求，参考下面代码。
① 来到 [mock](https://github.com/pure-admin/vue-pure-admin/tree/main/mock) 文件存放目录，比如添加 `login` 接口，采用 `post` 请求，参考下面代码。

::: details

Expand All @@ -34,7 +34,7 @@ export default [

:::

② 上面我们添加了 `login` 接口，接着来到 [api](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/api) 目录，比如添加 `user.ts` 文件，参考下面代码
② 上面我们添加了 `login` 接口，接着来到 [api](https://github.com/pure-admin/vue-pure-admin/tree/main/src/api) 目录，比如添加 `user.ts` 文件，参考下面代码

::: details

Expand Down Expand Up @@ -96,7 +96,7 @@ async function onLogin() {

### 如何快速删除 `mock`

来到 [build/plugins.ts](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/build/plugins.ts#L6) 文件，将 `import { viteMockServe } from "vite-plugin-mock";` 注释，最后把 [这里选中](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/build/plugins.ts#L43-52) 的都注释即可
来到 [build/plugins.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L15) 文件，将 `import { vitePluginFakeServer } from "vite-plugin-fake-server";` 注释，最后把 [这里选中](https://github.com/pure-admin/vue-pure-admin/blob/main/build/plugins.ts#L38-L43) 的都注释即可

## Axios

Expand All @@ -106,7 +106,7 @@ async function onLogin() {

#### 基本请求方式

平台封装了 [axios](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/utils/http)，支持的请求方式请看 [具体参考](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/types.d.ts#L14)，下面举例常用的四种请求方式
平台封装了 [axios](https://github.com/pure-admin/vue-pure-admin/tree/main/src/utils/http)，支持的请求方式请看 [具体参考](https://github.com/pure-admin/vue-pure-admin/tree/main/src/utils/http/types.d.ts#L14)，下面举例常用的四种请求方式

##### `get` 请求

Expand Down Expand Up @@ -190,7 +190,7 @@ export const textRequest = (data?: object) => {

##### `http.request` 传参解析

[http.request 源码](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L149)，参数解析如下
[http.request 源码](https://github.com/pure-admin/vue-pure-admin/tree/main/src/utils/http/index.ts#L149)，参数解析如下

| **参数属性** | **说明** | **类型** |
| ------------- | ----------------- | ----------------------- |
Expand All @@ -200,7 +200,7 @@ export const textRequest = (data?: object) => {
| `axiosConfig` | 自定义`axios`配置 | `PureHttpRequestConfig` |

:::tip
当然平台不仅提供了 `http.request` 方法让您发送请求，还提供两种额外的请求方式 [http.post](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L176)、[http.get](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L185)，当然这两种也是基于 `http.request` 封装的，也会走请求拦截和响应拦截，如果您需要脱离平台封装的请求，可以直接使用 `axios`，类似参考 [src/views/welcome/index.vue](https://gitee.com/yiming_chang/vue-pure-admin/blob/main/src/views/welcome/index.vue#L66)
当然平台不仅提供了 `http.request` 方法让您发送请求，还提供两种额外的请求方式 [http.post](https://github.com/pure-admin/vue-pure-admin/tree/main/src/utils/http/index.ts#L176)、[http.get](https://github.com/pure-admin/vue-pure-admin/tree/main/src/utils/http/index.ts#L185)，当然这两种也是基于 `http.request` 封装的，也会走请求拦截和响应拦截，如果您需要脱离平台封装的请求，可以直接使用 `axios`，类似参考 [src/views/components/upload/index.vue](https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload/index.vue#L92-L98)
:::

#### 如何与后台联调
Expand All @@ -213,7 +213,7 @@ export const textRequest = (data?: object) => {

###### 解决办法

① 本地开发的话，我们来到 [vite.config.ts](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/vite.config.ts#L46)，参考下面代码配置本地跨域代理即可
① 本地开发的话，我们来到 [vite.config.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/vite.config.ts#L27)，参考下面代码配置本地跨域代理即可

```ts
proxy: {
Expand All @@ -226,7 +226,7 @@ proxy: {
}
```

② 配置好上面的跨域代理后，来到 [src/api](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/api) 目录，这里我们先新建一个 `utils.ts` 文件用来配置环境，参考下面代码
② 配置好上面的跨域代理后，来到 [src/api](https://github.com/pure-admin/vue-pure-admin/tree/main/src/api) 目录，这里我们先新建一个 `utils.ts` 文件用来配置环境，参考下面代码

注意：这里又分两种写法

Expand All @@ -249,7 +249,7 @@ export const baseUrlApi = (url: string) =>
: `http://127.0.0.1:3000/${url}`;
```

③ 写完上面的 `utils.ts` 后，继续在 [src/api](https://gitee.com/yiming_chang/pure-admin-thin/tree/main/src/api) 目录，我们再建一个 `user.ts` 文件，导出这个接口，供页面调用，参考下面代码
③ 写完上面的 `utils.ts` 后，继续在 [src/api](https://github.com/pure-admin/vue-pure-admin/tree/main/src/api) 目录，我们再建一个 `user.ts` 文件，导出这个接口，供页面调用，参考下面代码

user.ts

Expand All @@ -263,7 +263,7 @@ export const getLogin = (data?: object) => {
};
```

④ 上面都完成后，我们在需要调用该接口的地方调用即可，参考 [src/store/modules/user.ts](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/store/modules/user.ts#L33)
④ 上面都完成后，我们在需要调用该接口的地方调用即可，参考 [src/store/modules/user.ts](https://github.com/pure-admin/vue-pure-admin/blob/main/src/store/modules/user.ts#L73)

##### 多个后端地址如何联调

Expand Down Expand Up @@ -378,17 +378,17 @@ export const testRequest = (data?: object) => {

#### `JWT Token`（内置无感刷新 `token` 解决方案）

实现原理：后端返回两个 `token`（一个用来请求，一个用来刷新）和过期时间，前端将其进行本地存储，每当接口请求时，把本地存储的过期时间与本地当前时间对比，如果 `token` 过期就把当前请求暂存，然后去请求刷新 `token` 接口，获取到新 `token` 后，再 [触发](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L51) 暂存的请求
实现原理：后端返回两个 `token`（一个用来请求，一个用来刷新）和过期时间，前端将其进行本地存储，每当接口请求时，把本地存储的过期时间与本地当前时间对比，如果 `token` 过期就把当前请求暂存，然后去请求刷新 `token` 接口，获取到新 `token` 后，再 [触发](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/http/index.ts#L51) 暂存的请求

##### 信息存储

具体看 [src/utils/auth](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/auth.ts) 文件，里面有很详细的备注
具体看 [src/utils/auth](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/auth.ts) 文件，里面有很详细的备注

##### 细节处理

① 不需要携带 `token` 的接口我们设置了 [请求白名单](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L76)
① 不需要携带 `token` 的接口我们设置了 [请求白名单](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/http/index.ts#L76)

② 当 `token` 过期后，平台会暂存请求，直到拿到新 `token` 才会请求，避免了当页面有多个请求会重复刷新 `token` 的问题。核心代码有三处：[一](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L51)、[二](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L93)、[三](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/utils/http/index.ts#L100)
② 当 `token` 过期后，平台会暂存请求，直到拿到新 `token` 才会请求，避免了当页面有多个请求会重复刷新 `token` 的问题。核心代码有三处：[一](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/http/index.ts#L51)、[二](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/http/index.ts#L93)、[三](https://github.com/pure-admin/vue-pure-admin/blob/main/src/utils/http/index.ts#L100)

:::tip 生产环境 Mock 可以和真实接口共存吗？
当然可以共存，不过可能会遇到 `Mock` 干扰真实接口的问题。如果您在开发环境接口没问题，但是到生产环境出问题了，在排除后端问题前提下可以尝试 [删除 Mock](#如何快速删除-mock)
Expand Down

0 comments on commit 1b6d4ad

Please sign in to comment.