014 Umi 中的 fetch 与 ahooks useRequest 的梦幻联动

聪小陈
2,842 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

request 请求数据

Umi@4 中使用 axios 代替了 fetch，有一些使用上的差异，这节课我们提到的是 Umi 中的 fetch 方案

前面我们花了大量的篇幅介绍项目中的数据流方案，其实他们是作为数据消费部分存在的。但是我们并没有真正的发起数据请求，在这里我们将详细的介绍在 umi 中如何规范的发起数据请求，即如何将数据传入我们之前介绍的数据流方案中。

在很多其他项目中，我们都会单独维护一个 http 请求的工具类，它一般会在你的 utils 文件夹中，但是通过多个项目的代码比对，我们发现这个工具类有至少80%的代码是重复的，且不同人员的维护上也比较随意，代码维护上是比较乱的。因此我们将 request 请求内置到框架中。

import { request } from 'umi';

const data = await request('/api/hello', {
  method: 'get',
});

直接使用，对服务端的返回数据模型，会有一些约定

如果你的服务端返回数据格式不同，会在后面的配置中提到如何处理这种情况。

interface ErrorInfoStructure {
  success: boolean; // if request is success
  data?: any; // response data
  ...
}

一般我们对服务端发起请求，最常见的会涉及到，统一的请求url、统一的head、默认的请求方式（默认 get或者默认post）等。

这些内容，我们都在运行时配置中提供了修改方式。

运行时配置顾名思义就是在项目运行时会根据一些条件或者时机来修改配置，常常用于某些需要动态配置的情况。在前面讲解 umi 中的配置时我们已经提过运行时配置。记住运行时配置只有一个地方 src/app.ts。某些功能会用到它。你需要按约定导出对象，不能导出不存在的对象。这些对象由你所使用的插件定义，包括内置插件和外部引用插件。

export const request = {
  prefix: '',
  method: 'get',
  errorConfig: {
    adaptor: (resData) => {
      return {
        ...resData,
        success: resData.ok,
        errorMessage: resData.message,
      };
    },
  },
};

在运行时配置中导出 request 是我们的请求功能要求的。

request 配置

参数说明类型可选值默认值
method请求方式stringget , post , put ...get
paramsurl 请求参数object 或 URLSearchParams 对象----
data提交的数据any----
headersfetch 原有参数object--{}
timeout超时时长, 默认毫秒, 写操作慎用number----
prefix前缀, 一般用于覆盖统一设置的 prefixstring----
suffix后缀, 比如某些场景 api 需要统一加 .jsonstring----
credentialsfetch 请求包含 cookies 信息string--credentials: 'same-origin'
useCache是否使用缓存（仅支持浏览器客户端）boolean--false
validateCache缓存策略函数(url, options) => boolean--默认 get 请求做缓存
ttl缓存时长, 0 为不过期number--60000
maxCache最大缓存数number--无限
requestTypepost 请求时数据类型stringjson , formjson
parseResponse是否对 response 做处理简化boolean--true
charset字符集stringutf8 , gbkutf8
responseType如何解析返回的数据stringjson , text , blob , formData ...json , text
throwErrIfParseFail当 responseType 为 'json', 对请求结果做 JSON.parse 出错时是否抛出异常boolean--false
getResponse是否获取源 response, 返回结果将包裹一层boolean--fasle
errorHandler异常处理, 或者覆盖统一的异常处理function(error)--
cancelToken取消请求的 TokenCancelToken.token----

fetch 原其他参数有效, 详见fetch 文档

上面列出的是 request 支持的所有配置，看起来有些复杂，但是我们在实际使用中最经常修改的，其实只有 prefix，当你需要切换请求前缀时，会比较频繁的修改它。其他的数据应该是在首次接口连调的时候，和服务端约定好的配置。

修改请求数据-加密或过滤

一般我们还有有一个常用的需求，对我们发出的数据进行安全性的数据加密。或者仅针对某个接口对数据进行过滤。

这时候就能用到我们的中间件功能了。这个在 express 项目中是很容易理解的概念。

const middleware = async (ctx, next) => {
  // 这里是对请求数据的操作，比如加密或者过滤数据，我们可以在这里操作
  // url 请求不包含 ‘abc’ 时，就做某些操作
  if (!ctx.req.url.includes('abc')) {
  }
  await next();
  // next 执行之后，这部分我们一般是对请求结果做操作，比如统一的错误码处理，或者token失效这些，都可以在这里处理
  // 以下代码只是模拟，正式的写法要根据服务端的约定
  if (ctx.res.errors) {
    const {
      errorCode,
      fieldPath,
      message,
      value } = ctx.res.errors[0];
    if (errorCode === '0000') {
      gotoLogin(message);
    } else {
      Toast.fail(`${message}` || '请求异常请稍后重试', 1);
    }
  }
};

export const request = {
  prefix: '', // 统一的请求头
  middlewares: [middleware],
  errorHandler: (error: ResponseError) => {
    // 集中处理错误
    console.log(error);
  },
};

ahooks useRequest

理解了上面的概念，那么在我们之前提到的数据流中，应该在什么时机发起请求呢？ 一般我们会在 useEffect 中，请求服务端接口，但是为了更加简洁的使用 request，我们引入了 ahooks 中的 useRequest。 这里我们只介绍两种最常见的用法

默认用法

默认用法最好理解，常常用来加载页面的初始化数据。比如列表的首屏展示。

import { useRequest } from 'umi';
import Mock from 'mockjs';
import React from 'react';

function getUsername(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock('@name'));
    }, 1000);
  });
}

export default () => {
  const { data, error, loading } = useRequest(getUsername);

  if (error) {
    return <div>failed to load</div>;
  }
  if (loading) {
    return <div>loading...</div>;
  }
  return <div>Username: {data}</div>;
};

值得注意的是，上面的代码看起来像是同步执行的，但其实 react 的 hooks 都是异步的，简单理解就是，数据修改时都会导致页面重绘，所以当你的自定义 hooks 很多的时候，可能你的页面会渲染好几次。

手动触发

如果设置了 options.manual = true，则 useRequest 不会默认执行，可以在合适的时候通过 run 来触发执行。比如常见的搜索查询，我们会在输入完条件之后，点击查询按钮才会调用服务端接口。

import { message } from 'antd';
import React, { useState } from 'react';
import { useRequest } from 'umi';

function changeUsername(username: string): Promise<{ success: boolean }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ success: true });
    }, 1000);
  });
}

export default () => {
  const [state, setState] = useState('');

  const { loading, run } = useRequest(changeUsername, {
    manual: true,
    onSuccess: (result, params) => {
      if (result.success) {
        setState('');
        message.success(`The username was changed to "${params[0]}" !`);
      }
    },
  });

  return (
    <div>
      <input
        onChange={(e) => setState(e.target.value)}
        value={state}
        placeholder="Please enter username"
        style={{ width: 240, marginRight: 16 }}
      />
      <button disabled={loading} type="button" onClick={() => run(state)}>
        {loading ? 'Loading' : 'Edit'}
      </button>
    </div>
  );
};

感谢阅读，这个文章仅仅作为这个概念的讲解，实战在后续课程中，因此这节课没有源码归档。你不需要修改任何的文件。

avatar
文章
阅读
粉丝