swr，解决 React 项目 API 调用的最好方案

Posted 2022-04-21 GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了swr，解决 React 项目 API 调用的最好方案相关的知识，希望对你有一定的参考价值。

swr，解决 React 项目 API 调用的最好方案

搜了一圈，感觉 swr 源码学习的文章不少，但是好像使用方面的确实有限，所以……

目前体感是觉得使用 swr 会比 redux-saga 要舒服一些，首先代码量小很多，其次同步异步方面的操作也更加简洁明了。swr 对各种 API 调用的支持也很好，官方文档还有包括 Axios 和 GraphQL 的配置，总体来说应该是最近使用的一些包中，最能够解决 React 项目中 API 调用的库了。

swr 是 stale-while-revalidate 的缩写，stale 就是放置很久的意思，具体怎么翻译我也不是很清楚，大概就是 状态被放置不变，但是还会重新验证 的感觉。这是一个 nextjs 团队开发的 node 包，其作用包括当 fetch API 使用和控制管理状态同步。

其本身是一个 React Hooks，因此搭配 React 生态圈使用会比较好（如 Next 系列），其余框架没有尝试过，这里不做妄言。

fetch API

参考代码如下：

import React,  useState, useEffect  from "react";
import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

const SWR = () => 
  const [products, setProducts] = useState(null);

  const  data, error  = useSWR(
    "https://dummyjson.com/products?limit=10",
    fetcher
  );

  useEffect(() => 
    if (data) 
      setProducts(data.products);
    
  , [data]);

  if (error) 
    return <p>Error</p>;
  

  if (!products) 
    return <p>loading</p>;
  

  return (
    <div>
      products.map((product) => 
        return (
          <div key=product.id>
            <h1>product.title</h1>
            <p>product.description</p>
          </div>
        );
      )
    </div>
  );
;

export default SWR;

显示效果如下：

useSWR 是 swr 封装的 hooks，使用这个 hooks 可以轻松的获取 data 和 error 两个属性，从而进行操作。如果 swr 只能提供这些功能的话，那么自己封装一个 custom hook 也一样，为什么非要使用 swr？

串行调用

参考以下的代码：

import React,  useState, useEffect  from "react";
import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

console.time("fetching");

const SWR = () => 
  const  data: products, error  = useSWR(
    "https://dummyjson.com/products?limit=1",
    fetcher
  );

  const  data: productDetail, error: productError  = useSWR(
    () => `https://dummyjson.com/products/$products.products[0].id`,
    fetcher
  );

  console.log(productDetail);

  if (!productDetail) 
    return <p>Loading</p>;
  

  console.timeLog("fetching");

  return (
    <div>
      <h1>productDetail.title</h1>
      <p>productDetail.description</p>
    </div>
  );
;

export default SWR;

渲染结果如下：

从抓取数据到成功用了 8000ms，并且，数据是可以成功渲染出来的。也就是说，swr 实现了从 /products 这个 API 中获取到了产品，随后再使用获取的产品 id 去调用产品详情这样的操作。没有多余的代码，仅仅在使用 useSWR 中再调用了一个匿名函数，就完成了这样一个套用很多 thenable 的代码。

代码量：2 行。

并行调用

swr 默认情况下是支持并联操作的，参考以下代码：

import React,  useState, useEffect  from "react";
import useSWR from "swr";

const fetcher = (...args) => fetch(...args).then((res) => res.json());

console.time("fetching");

const SWR = () => 
  const  data: product1, error: err1  = useSWR(
    "https://dummyjson.com/products/1",
    fetcher
  );
  const  data: product2, error: err2  = useSWR(
    "https://dummyjson.com/products/2",
    fetcher
  );
  const  data: product3, error: err3  = useSWR(
    "https://dummyjson.com/products/3",
    fetcher
  );

  if (!product1 || !product2 || !product3) 
    return <p>Loading</p>;
  

  console.log(product1);
  console.log(product2);
  console.log(product3);

  console.timeLog("fetching");

  return (
    <div>
      <h1>product1.title</h1>
      <p>product1.description</p>
    </div>
  );
;

export default SWR;