react同步請求 react怎樣請求資料

2021-10-16 13:25:38 字數 1021 閱讀 1723

react請求資料的方法:

方式1:內聯

這是最簡單,最直接的選擇。在 react 元件中進行 http 呼叫並處理響應。

fetch("/users").then(response => response.json());

看起來很簡單。但是這個示例忽略了載入狀態,錯誤處理,宣告和設定相關狀態等。在現實世界中, http 呼叫看起來更像這樣。

import react, from "react";

export default function inlinedemo() from "react";

import from "./services/userservice";

export default function centraldemo() {

const [users, setusers] = usestate();

const [loading, setloading] = usestate(true);

const [error, seterror] = usestate(null);

useeffect(() => {

getusers()

.then(json => {

setusers(json);

setloading(false);

.catch(err => {

console.error(err);

seterror(err);

if (loading) return "loading...";

if (error) return "oops!";

return users[0].username;

然而這並沒有太簡化請求呼叫。主要的好處是它可以強制一致地處理 http 呼叫。其思想是這樣的:當相關函式一起處理時,更容易一致地處理它們。如果 userservice 資料夾中充滿了進行 http 呼叫的函式,那麼我可以很容易地確保它們始終如一地這樣做。此外,如果呼叫被復用,則很容易從這個集中位置呼叫它們。

然而,我們還可以做得更好。

react 版權問題 react中樣式衝突怎麼解決

解決react中樣式衝突的方法 首先開啟相應的 檔案 然後將類名前加上模組名,如將整個元件的樣式表css類名前加上元件名lovevideo即可。本教程操作環境 windows7系統 react17.0.1版本,該方法適用於所有品牌電腦。解決react中樣式衝突 react在開發中很多有很多需要注意的...

React 使用 fetch 請求天氣

中國天氣網 提供了查詢天氣的 api,通過傳入城市 id,可以獲得當前城市的天氣資訊,api 相關資訊如下 規格 描述 主機位址 訪問方法 get路徑 data cityinfo html 返回結果 json 格式,包含 city temp1 temp2 weather等資訊 返回結果格式如下 在請...

react中setState同步 非同步問題

class example extends react.component componentdidmount console.log this.state.val 第 1 次 log this.setstate console.log this.state.val 第 2 次 log settim...