用useRequest让你与重复请求逻辑说拜拜，解放双手

前端

2023-01-14 15:41:55

使用 useRequest 与重复请求逻辑说再见，解放双手

引言

身为前端工程师，我们经常需要与网络请求打交道，但这些请求代码往往重复且容易出错。为了简化这一过程，我们创建了 useRequest，一个高阶函数，只需一行代码即可发起请求。

useRequest 的诞生

在前端开发中，我们经常编写大量的重复请求代码，如设置请求头、处理参数和处理结果等。这些代码不仅让人厌烦，还容易出错。

useRequest 应运而生，它封装了这些重复的逻辑，使开发者只需传入请求参数即可发起请求。

useRequest 的优势

useRequest 有诸多优点：

提高开发效率： 复用相同的请求逻辑，无需重复编写代码，提升开发效率和降低出错率。
提高可读性和可维护性： 将请求逻辑集中在一个地方，代码更加清晰易懂，方便修改和维护。
提高代码健壮性： useRequest 内置错误处理逻辑，增强代码健壮性，减少问题发生率。

useRequest 的使用方法

使用 useRequest 非常简单，只需导入函数并调用即可：

import { useRequest } from 'use-request';

const MyComponent = () => {
  const { data, loading, error } = useRequest('https://example.com/api/v1/users');

  // 渲染内容
};

useRequest 函数返回一个对象，包含 data（请求结果）、loading（请求状态）和 error（请求错误信息）属性。

useRequest 的进阶用法

useRequest 不仅限于基本请求，还可以处理复杂请求，例如带参数的请求、带请求头的请求和并发请求：

// 带参数的请求
const { data } = useRequest('https://example.com/api/v1/users', {
  params: {
    page: 1,
    size: 10,
  },
});

// 带请求头的请求
const { data } = useRequest('https://example.com/api/v1/users', {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

// 并发请求
const { data1, data2 } = useRequest([
  'https://example.com/api/v1/users',
  'https://example.com/api/v1/posts',
]);