Ajax 클라이언트 반응
반응 아약스 클라이언트
Consume rest endpoints using react components. Inspired by ApolloClient
설치
npm install --save react-ajax-client
yarn add react-ajax-client
용법
import React from "react";
import { Provider, Fetch, Send, Client } from "react-ajax-client";
const client = new Client({
baseURL: "http://mywebsite.com/api",
headers: {
"Content-Type": "application/json"
}
});
const ListUsers = () => (
<Fetch path="/users">
{({ loading, error, data }) => {
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>{error.message}</div>;
}
return <pre>{JSON.stringify(data, null, 4)}</pre>;
}}
</Fetch>
);
const CreateUser = () => (
<Send
path="/users"
onProgress={() => console.log("Processing")}
onComplete={response =>
console.log("Completed", JSON.stringify(response))
}
onError={response => console.error("Error", JSON.stringify(response))}
>
{trigger => (
<button
onClick={e => trigger({ firstName: "Billy", lastName: "Jean" })}
>
Create a User
</button>
)}
</Send>
);
const MyApp = () => (
<Provider client={client}>
<div>
<h1>My App</h1>
<CreateUser />
<ListUsers />
</div>
</Provider>
);
Code을 확인하십시오.
Reference
이 문제에 관하여(Ajax 클라이언트 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/aiosifelis/react-ajax-client-129e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Consume rest endpoints using react components. Inspired by ApolloClient
npm install --save react-ajax-client
yarn add react-ajax-client
import React from "react";
import { Provider, Fetch, Send, Client } from "react-ajax-client";
const client = new Client({
baseURL: "http://mywebsite.com/api",
headers: {
"Content-Type": "application/json"
}
});
const ListUsers = () => (
<Fetch path="/users">
{({ loading, error, data }) => {
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>{error.message}</div>;
}
return <pre>{JSON.stringify(data, null, 4)}</pre>;
}}
</Fetch>
);
const CreateUser = () => (
<Send
path="/users"
onProgress={() => console.log("Processing")}
onComplete={response =>
console.log("Completed", JSON.stringify(response))
}
onError={response => console.error("Error", JSON.stringify(response))}
>
{trigger => (
<button
onClick={e => trigger({ firstName: "Billy", lastName: "Jean" })}
>
Create a User
</button>
)}
</Send>
);
const MyApp = () => (
<Provider client={client}>
<div>
<h1>My App</h1>
<CreateUser />
<ListUsers />
</div>
</Provider>
);
Reference
이 문제에 관하여(Ajax 클라이언트 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aiosifelis/react-ajax-client-129e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)