简介
前端数据获取经历了数次范式转变:从 XMLHttpRequest 回调,到使用 fetch 和 axios 的 Promise 链,再到使用 React Query 和 SWR 的声明式钩子。每一步都以更多的抽象来换取更少的样板代码。
一个较少被讨论但值得注意的方向是向基于策略的请求处理的转变——库不仅提供数据获取钩子,还提供针对特定业务模式(如分页、表单提交、轮询、文件上传等)量身定制的专用钩子。你不再逐步告诉计算机“如何”获取数据,而是声明你“需要”什么。
本文以 alova 作为参考实现来考察这一演变,分析基于策略的方法在何时能交付价值,以及何时更简单的替代方案仍然合理。
样板代码问题
以分页列表为例,这是前端开发中最常见的模式之一。以下是使用 axios 的典型基于 Promise 的实现方式:
// 传统 Promise (axios) 方法
import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
function TodoList() {
const [list, setList] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [page, setPage] = useState(1);
const pageSize = 10;
const [total, setTotal] = useState(0);
const fetchList = useCallback(async () => {
setLoading(true);
免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。