docs/reference/plugin/plugins/request.md · SyncGithub/fes.js

Fetch the repository succeeded.

richgiteeai

Watch

Unwatch Watching Releases Only Ignoring

1 Star 0 Fork 117

SyncGithub/fes.js

forked from WeBank/fes.js

Code Issues 0 Pull Requests 0 Wiki Insights Pipelines

Service

Tencent Cloud Serverless

Create your Gitee Account

Explore and code with more than 14 million developers,Free private repositories !:)

Already have an account? Sign in

文件

master

Branches (6)

Tags (60)

Manage

master

patchRoutes

1.0

multiPages

gh-pages

@fesjs/create-fes-app@2.0.1

@fesjs/fes@2.0.1

@fesjs/preset-built-in@2.0.1

v2.0.0

v2.0.0-rc.29

v2.0.0-rc.28

v2.0.0-rc.27

v2.0.0-rc.26

v2.0.0-rc.25

v2.0.0-rc.24

v2.0.0-rc.23

v2.0.0-rc.22

v2.0.0-rc.21

v0.4.8

v2.0.0-rc.20

v2.0.0-rc.19

v2.0.0-rc.18

v2.0.0-rc.17

v2.0.0-rc.16

v2.0.0-rc.15

Clone or Download

Clone/Download

HTTPS SSH SVN SVN+SSH Download ZIP

Prompt

To download the code, please copy the following command and execute it in the terminal

To ensure that your submitted code identity is correctly recognized by Gitee, please execute the following command.

git config --global user.name userName 
git config --global user.email userEmail

When using the SSH protocol for the first time to clone or push code, follow the prompts below to complete the SSH configuration.

1 Generate RSA keys.

2 Obtain the content of the RSA public key and configure it in SSH Public Keys

To use SVN on Gitee, please visit the usage guide

When using the HTTPS protocol, the command line will prompt for account and password verification as follows. For security reasons, Gitee recommends configure and use personal access tokens instead of login passwords for cloning, pushing, and other operations.

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # Private Token

Branches 6

Tags 60

fes.js

docs

reference

plugin

plugins

request.md

request.md 3.16 KB

# @fesjs/plugin-request

基于 axios 封装的 request,内置防止重复请求、请求节流、错误处理等功能。
## 启用方式

在 `package.json` 中引入依赖:
```json
{
 "dependencies": {
 "@fesjs/fes": "^2.0.0",
 "@fesjs/plugin-request": "^2.0.0"
 },
}
```
## 配置

### 构建时配置

```js
export default {
 request: {
 dataField: 'result',
 },
}
```

#### dataField

- 类型: `string`
- 默认值: `''`
- 详情:

`dataField` 对应接口统一格式中的数据字段,比如接口如果统一的规范是 `{ success: boolean, result: any}` ,那么就不需要配置,这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`,直接返回 `result` 中的数据,方便使用。如果你的后端接口不符合这个规范,可以自行配置 `dataField`。配置为 `''`(空字符串)的时候不做处理。

### 运行时配置

在 `app.js` 中进行运行时配置。
 
```js
export const request = {
 // 格式化 response.data (只有 response.data 类型为 object 才会调用)
 responseDataAdaptor: (data) => {

},
 // 请求拦截器
 requestInterceptors: [],
 // 相应拦截器
 responseInterceptors: [],
 // 错误处理
 // 内部以 reponse.data.code === '0' 判断请求是否成功
 // 若使用其他字段判断,可以使用 responseDataAdaptor 对响应数据进行格式
 errorHandler: {
 11199: (response) => {

},
 404: (error) => {

}
 },
 // 其他 axios 配置
 ...otherConfigs
}
```
## 使用

### 发起一个普通 post 请求

```js
import {request} from '@fesjs/fes';

request('/api/login', {
 username: 'robby',
 password: '123456'
}).then((res) => {
 // do something
}).catch((err) => {
 // 处理异常
})
```

### 请求节流

```js
import {request} from '@fesjs/fes';

request('/api/login', {
 username: 'robby',
 password: '123456'
}, {
 throttle: 1000, // 1 秒内只能发起一次请求
}).then((res) => {
 // do something
}).catch((err) => {
 // 处理异常
})
```

### 请求缓存

```js
import {request} from '@fesjs/fes';

request('/api/login', {
 username: 'robby',
 password: '123456'
}, {
 cache: {
 cacheType: 'ram', // ram: 内存,session: sessionStorage,local:localStorage
 cacheTime: 1000 * 60 * 3 // 缓存时间,默认3min
 },
}).then((res) => {
 // do something
}).catch((err) => {
 // 处理异常
})
```

若 `cache` 传 `true`,则默认使用 `ram` 缓存类型,缓存时间 3min。

### 结合 use 使用

```js
import {useRequest} from '@fesjs/fes';

export default {
 setup() {
 const {loading, data, error} = useRequest('/api/login', {
 username: 'robby',
 password: '123456'
 })

return {
 loading,
 data,
 error
 }
 }
}
```

## API

### request

- **类型**:函数

- **详情**:请求后端接口
- **参数**:
 - url: 后端接口 url
 - data: 参数
 - options: 配置( 支持 axios 所有配置)
- **返回值**: Promise

### useRequest

request 的封装,返回响应式 `loading`、`error`、 `data`

Copy Edit Raw Blame History

万纯 authored 2021年03月05日 19:10 +08:00 . docs: 复制中文文档到英文目录

# @fesjs/plugin-request

基于 axios 封装的 request,内置防止重复请求、请求节流、错误处理等功能。
## 启用方式

在 `package.json` 中引入依赖:
```json
{
 "dependencies": {
 "@fesjs/fes": "^2.0.0",
 "@fesjs/plugin-request": "^2.0.0"
 },
}
```
## 配置

### 构建时配置

```js
export default {
 request: {
 dataField: 'result',
 },
}
```

#### dataField

- 类型: `string`
- 默认值: `''`
- 详情:

### 运行时配置

在 `app.js` 中进行运行时配置。
 
```js
export const request = {
 // 格式化 response.data (只有 response.data 类型为 object 才会调用)
 responseDataAdaptor: (data) => {

},
 404: (error) => {

}
 },
 // 其他 axios 配置
 ...otherConfigs
}
```
## 使用

### 发起一个普通 post 请求

```js
import {request} from '@fesjs/fes';

request('/api/login', {
 username: 'robby',
 password: '123456'
}).then((res) => {
 // do something
}).catch((err) => {
 // 处理异常
})
```

### 请求节流

```js
import {request} from '@fesjs/fes';

### 请求缓存

```js
import {request} from '@fesjs/fes';

若 `cache` 传 `true`,则默认使用 `ram` 缓存类型,缓存时间 3min。

### 结合 use 使用

```js
import {useRequest} from '@fesjs/fes';

export default {
 setup() {
 const {loading, data, error} = useRequest('/api/login', {
 username: 'robby',
 password: '123456'
 })

return {
 loading,
 data,
 error
 }
 }
}
```

## API

### request

- **类型**:函数

- **详情**:请求后端接口
- **参数**:
 - url: 后端接口 url
 - data: 参数
 - options: 配置( 支持 axios 所有配置)
- **返回值**: Promise

### useRequest

request 的封装,返回响应式 `loading`、`error`、 `data`

误判申诉

此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。

取消

提交

About

Fes.js 是一套优秀的中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包的命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js,上手简单。经过多个项目中打磨,趋于稳定。

No labels

https://webank.gitee.io/fes.js/

Use MIT

0 Stars

1 Watching

117 Forks

Cancel

Releases

No release

Contributors

All

Activities

can not load any more

Edit

About

Homepage

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

https://gitee.com/sync-github/fes.js.git

git@gitee.com:sync-github/fes.js.git

sync-github

fes.js

master

Going to Help Center

Search

Git 命令在线学习如何在 Gitee 导入 GitHub 仓库

GitHub仓库快速导入Gitee及同步更新

什么是 Release(发行版)

将 PHP 项目自动发布到 packagist.org

Comment

Repository Report

Back to the top