手把手教你如何使用swr體驗react.Susponse

事故的小黃瓜發表於2019-12-27
React

大家好，我是來自重慶的一個精神小夥，今年畢業，來了掘金已經有不少時間了，但從沒寫過一篇文章，這是我的第一篇掘金文章，寫得不好之處希望大佬們能指出。

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時候

手把手教你如何使用swr體驗react.Susponse
請求完成，狀態為success時

手把手教你如何使用swr體驗react.Susponse
當然還可以設定狀態為error時候，套路是一樣的

如果覺得這篇文章對您有幫助，麻煩點選左上方的小星星，謝啦

相關文章