手把手教你如何使用swr体验react.Susponse

你们好，我是来自重庆的一个精神小伙，今年毕业，来了掘金已经有很多时间了，但从没写过一篇文章，这是个人第一篇掘金文章，写得很差之处但愿大佬们能指出。

swr介绍

先吐槽一下，由于本人英语阅读能力有限，swr目前只有英文文档，刚开始看的是英文文档，比较头大，幸亏知乎上已经有飞冰大佬翻译成中文，连接为：

[swr中文使用手册]zhuanlan.zhihu.com/p/89570321

先简单的说一下

swr是一个用于请求远程数据的 React Hooks 库，这是官网的快速开始实例

import useSWR from 'swr'
function Profile () {
const { data, error } = useSWR('/api/user', fetch)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
复制代码

useSWR 接受一个 key 和一个异步请求函数 fetch 做为参数。 key 是数据的惟一标识符，一般是 API URL，而且 fetch 接受 key 做为其参数，而且 fetch 接受 key 做为其参数，而且 fetch 接受 key 做为其参数，完成具体的数据请求行为并异步返回数据。

fetch是一个远程请求，好比它能够是使用axios来获取

const fetch = axios({
         //这里的url,接收的就是传的key '/api/user'
         url, 
         method: "get"
       }).then(res => {
         console.log(res);
         responseData = res.data;
       });
复制代码

传统请求的方式

在传统的方式在咱们在componentdidmount中请求，而后setState,存入state中，使用react-hooks也是同样的，须要在useEffect中为state赋初值，套路是同样的，缺点也很明显，特别麻烦

class Demo extends React.Component {
 constructor(props) {
       super(props);
       this.state = {  }
 }
 componentDidMount() {
    axios('...').then(result => {
      this.setState({data: result});
    });
 }
 render() {
    if (!this.state.data) {
       return null;
    } else {
       return <div>this.state.data</div>;
    }
 }
}

复制代码

Susponse请求新姿式

import React, { Suspense, useEffect } from "react";
import useSWR from "swr";
import fetcher from "../../../../api/user";

const Child = () => {
  const { data } = useSWR("/api/users/alluser", fetcher, { suspense: true });
  useEffect(() => {}, []);
  console.log(data);
  const renderItem = () => {
    return data.data.map((item, index) => {
      return <li key={item.key}>{item.name}</li>;
    });
  };
  return <ul>{renderItem()}</ul>;
};
const App = () => {
  return (
    <Suspense fallback={<div>我是一个前端，成天郁郁寡欢</div>}>
      <Child></Child>
    </Suspense>
  );
};
export default App;


复制代码

别急，且容我慢慢道来！

Susponse用一句话来归纳的话，就是用同步的代码来实现异步操做，它能够明显减小请求时候的代码量。

为了解决上述问题呢，上述代码中，咱们可使用susponse+swr简化请求的流程，在swr中，有一个option能够设置成{ suspense: true }，即为开启susponse,子组件使用useSWR后，获取返回的data,将它渲染成li标签。 而后在父标签中，使用Susponse组件，Susponse组件的用处是，当子组件请求还在pending中时候，就显示fallback的内容，当请求完成后，就显示子组件，这是否是对比于传统方法来讲清晰多了。爽不爽！爽不爽！爽不爽！

其余文件

mock数据

使用的是飞冰，自带的mock能力

module.exports = {
  // 同时支持 GET 和 POST
  "/api/users/alluser": {
    data: [
      {
        key: "1",
        name: "小瓜皮"
      },
      {
        key: "2",
        name: "小皮瓜"
      }
    ]
  }
};



复制代码

api/users

import axios from "axios";
async function fetcher(url) {
  let res;
  switch (url) {
    case "/api/users/alluser":
      res = await axios({
        url,
        method: "get"
      });
      break;

    default:
      break;
  }
  return res.data;
}
export default fetcher;


复制代码

效果

刚开始还在请求中，状态为pending时候

请求完成，状态为success时

固然还能够设置状态为error时候，套路是同样的

若是以为这篇文章对您有帮助，麻烦点击左上方的小星星，谢啦