RFetch based on antd notification & axios.
Use npm
$ npm install r-fetch
Use yarn
$ yarn add r-fetch
To run the demo on your local server, please do as follows.
$ yarn dev
Then open http://localhost:8080/
// src/dataLayer/index.ts
import RFetch, { RFetchConfigs } from "r-fetch";
import "r-fetch/dist/index.css";
const configs: RFetchConfigs = {
searchUsers: {
requestConfig: {
url: "https://api.github.com/search/users",
params: {
q: "fix777",
},
},
notificationConfig: {
showBtn: {
show: "error",
errorText: "I got it.",
},
onPreError: ({ data }: any) => ({
message: "Hey, Your Reqeust has been rejected.",
description: String(data.message).repeat(100),
// duration: 2,
}),
},
},
};
const dataProvider = new RFetch(configs);
export default dataProvider;
// src/app.tsx
import dataProvider from "./dataLayer";
interface Params {
q?: string;
}
const asyncFetch = (callback: (data: any) => void) => async (
params?: Params
) => {
const options: AxiosRequestConfig = {};
if (params) {
options.params = params; // Method: GET
}
const { data }: AxiosResponse = await dataProvider.request(
"searchUsers",
options
);
callback(data);
};
interface AppState {
collapsed: boolean;
users: any[];
}
class App extends React.Component<{}, AppState> {
state: AppState = {
collapsed: false,
users: [],
};
componentWillMount() {
asyncFetch(this.receiveUsers)();
}
receiveUsers = (data: any) => {
const { items } = data;
this.setState({ users: items });
};
// ...
}
MIT