手把手教你如何使用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時候，套路是同樣的

若是以爲這篇文章對您有幫助，麻煩點擊左上方的小星星，謝啦