Appearance
Request 异步请求
request 是一个封装于axios强大的异步数据管理的 Hooks，项目中的网络请求场景使用 request 就够了。 request 核心代码极其简单，并且可以很方便的扩展出更高级的功能。目前已有能力包括：
- 节流
- 错误重试
- 数据缓存
安装
sh
# npm
npm install @neosjs/request --save-dev
# yarn
yarn add @neosjs/request
# pnpm
pnpm add @neosjs/request
# npm
npm install @neosjs/request --save-dev
# yarn
yarn add @neosjs/request
# pnpm
pnpm add @neosjs/request
基础使用
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 请求地址 | String | - |
错误重试
通过设置 retry ，指定错误重试次数，则 Request 在失败后会进行重试。如果设置了 retryDelay ，每次重试的时间间隔将会按照设定值来发起下一次的请求。
示例用法
提示
可以打开控制台 --> network 查看请求，当请求次数达到设置的 retry 时，将自动停止请求，并抛出错误信息。
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| retry | 重试次数 | Number | 1 |
| retryDelay | 重试时间间隔，单位为毫秒 | Number | 2000 |
数据缓存
如果设置了 cache ，Request 会将当前请求成功的数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据。 你也可以通过 cacheMaxAge 设置数据缓存时间，超过该时间，我们会清空该条缓存数据。
示例用法
提示
由于已经缓存了数据结构，当再次点击按钮时，将不会再发出请求。 可以打开控制台 --> network 查看请求。
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cache | 是否开启缓存 | Boolean | true |
async/await 用法
ts
import request from '@neosjs/request'
const res = await request({
url: 'https://api.com',
params: {
id: 1
}
})
import request from '@neosjs/request'
const res = await request({
url: 'https://api.com',
params: {
id: 1
}
})
requestAll
ts
import { requestAll } from '@neosjs/request'
const requestA = await request({}) // 请求1
const requestB = await request({}) // 请求2
const res = requestAll([requestA, requestB])
console.log(res)
import { requestAll } from '@neosjs/request'
const requestA = await request({}) // 请求1
const requestB = await request({}) // 请求2
const res = requestAll([requestA, requestB])
console.log(res)
requestInstance
该方法暴露出所有axios的接口
ts
import { requestInstance } from '@neosjs/request'
const res = await requestInstance({ url: 'https://api.com' })
console.log(res)
import { requestInstance } from '@neosjs/request'
const res = await requestInstance({ url: 'https://api.com' })
console.log(res)
参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 请求的 api 地址 | String | - |
| method | 请求类型 | String | GET |
| dataType | 返回数据类型 | String | json |
| timeout | 超时时间 | Number | 10000 |
| withCredentials | 是否传递 cookie | Boolean | false |
| params | 请求的参数体 | Object | - |
| retry | 重试次数 | Number | 1 |
| retryDelay | 重试间隔时间(ms) | Number | 2000 |
| cache | 是否开启缓存 | Boolean | true |
| cacheMaxAge | 缓存时间(ms) | Number | 60000 |
| forceUpdate | 是否强制更新缓存 | Boolean | false |
| cancelRequest | 是否取消重复请求 | Boolean | false |
| headers | 设置请求的 header | Object | {'Content-Type': 'application/json'} |
| before | 发起请求之前的回调函数 | Function | null |
| after | 请求完成后的回调函数 | Function | null |
| success | 成功返回的回调函数 | Function | null |
| fail | 接口调用失败的回调函数 | Function | null |
| complete | 接口调用结束的回调函数接口调用结束的回调函数 （调用成功、失败都会执行） | Function | null |