tarojs-request

小程序网络请求库，基于 Taro.request & koa-compose 封装, 旨在为开发者提供一个简单易用，易扩展的 api 调用方式。

支持的功能

• Typescript 支持
• koa 洋葱机制的 use 中间件机制支持
• timeout 支持
• 统一的错误处理方式

安装

1npm install --save tarojs-request

快速上手

执行GET请求

1import request from 'tarojs-request';
2
3request('https://xxx.xxx.xxx/xxx', { xxx: 'xxx' })
4  .then(console.log)
5  .catch(console.log);

执行POST请求

1import request from 'tarojs-request';
2
3request('https://xxx.xxx.xxx/xxx', { xxx: 'xxx' }, 'POST')
4  .then(console.log)
5  .catch(console.log);

tarojs-request API

• request【请求】

1// 类型
2function request<ResData, ReqData>(
3  url: string,
4  data?: ReqData,
5  method?: string,
6  extra?: Taro.request.Option,
7): Promise<Taro.request.SuccessCallbackResult<Response<ResData>>>;
8
9// 案例
10import request from 'tarojs-request';
11
12request('https://xxx.xxx.xxx/xxx', { xxx: 'xxx' }, 'POST', {
13  header: {
14    xx: 'xxx',
15  },
16})
17  .then(console.log)
18  .catch(console.log);

• extend【创建请求实例】

1// 类型
2function extend<ReqData>(initOptions?: Taro.request.Option<ReqData>>): Request;
3
4// 案例
5import { extend } from 'tarojs-request';
6
7const customRequest = extend({
8  timeout: 5000,
9});
10
11customRequest('https://xxx.xxx.xxx/xxx', { xxx: 'xxx' }, 'POST', {
12  header: {
13    xx: 'xxx',
14  },
15})
16  .then(console.log)
17  .catch(console.log);

请求配置

以下仅列出对比 Taro.request 请求配置新增的 item

参数	类型	默认值	必填	说明
errorHandler	(error: Error) => any	-	否	错误处理
timeoutMessage	string	-	否	超时可自定义提示文案, 需先定义 timeout
signal	AbortSignal	-	否	AbortSignal 终止请求

响应结构

响应结构同 Taro.request.SuccessCallbackResult 一致。

错误处理

1import request, { extend } from 'tarojs-request';
2
3const errorHandler = function (error) {
4  const codeMap = {
5    '021': '发生错误啦',
6    '022': '发生大大大大错误啦',
7    // ....
8  };
9  if (error.response) {
10    // 请求已发送但服务端返回状态码非 2xx 的响应
11    console.log(error.response.status);
12    console.log(error.response.headers);
13    console.log(error.data);
14    console.log(error.request);
15    console.log(codeMap[error.data.status]);
16  } else {
17    // 请求初始化时出错或者没有响应返回的异常
18    console.log(error.message);
19  }
20
21  throw error; // 如果throw. 错误将继续抛出.
22
23  // 如果return, 则将值作为返回. 'return;' 相当于return undefined, 在处理结果时判断response是否有值即可.
24  // return {some: 'data'};
25};
26
27// 1. 作为统一错误处理
28const extendRequest = extend({ errorHandler });
29
30// 2. 单独特殊处理, 如果配置了统一处理, 但某个api需要特殊处理. 则在请求时, 将errorHandler作为参数传入.
31request('/api/v1/xxx', { x: 'xxx' }, 'GET', { errorHandler });
32
33// 3. 通过 Promise.catch 做错误处理
34request('/api/v1/xxx')
35  .then(function (response) {
36    console.log(response);
37  })
38  .catch(function (error) {
39    return errorHandler(error);
40  });

中间件

同 Koa 中间件创建和使用保持一致，让开发者优雅地做请求前后的增强处理。

request.use((ctx, next))

• ctx(Object)：上下文对象，包括 req 和 res 对象
• next(Function)：调用下一个中间件的函数

案例

1import Taro from '@tarojs/taro';
2import request from 'tarojs-request';
3import { Middleware } from 'koa-compose';
4import { Context } from '../type';
5
6/**
7 * Check network
8 *
9 * @param {*} _ctx
10 * @param {*} next
11 * @return {*}
12 */
13const networkCheckMiddleware: Middleware<Context> = async (_ctx, next) => {
14  // 获取网络状态
15  const networkState = await Taro.getNetworkType();
16  if (networkState.networkType === 'none') {
17    throw new Error('当前网络不可用');
18  }
19  await next();
20};
21
22request.use(networkCheckMiddleware);

tarojs-request 提供了一个内置中间件 networkCheckMiddleware

中止请求

通过 AbortController 来中止请求

1import request, { AbortController } from 'tarojs-request';
2
3const controller = new AbortController(); // 创建一个控制器
4const { signal } = controller; // 返回一个 AbortSignal 对象实例，它可以用来 with/abort 一个 DOM 请求。
5
6signal.addEventListener('abort', () => {
7  console.log('aborted!');
8});
9
10request('/api/response_after_1_sec', {
11  signal, // 这将信号和控制器与获取请求相关联然后允许我们通过调用 AbortController.abort() 中止请求
12});
13
14// 取消请求
15setTimeout(() => {
16  controller.abort(); // 中止一个尚未完成的 DOM 请求。这能够中止 fetch 请求，任何响应 Body 的消费者和流。
17}, 100);