-
Notifications
You must be signed in to change notification settings - Fork 21
/
Fetch.js
79 lines (67 loc) · 1.71 KB
/
Fetch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import React, { Component } from 'react';
class Fetch extends Component {
state = {
reload: this.fetch.bind(this),
loading: null
};
cache = {};
componentDidMount() {
this.mounted = true;
if (this.props.url) {
this.fetch();
}
}
componentDidUpdate(prevProps) {
if (this.props.url !== prevProps.url) {
this.fetch();
}
}
componentWillUnmount() {
this.mounted = false;
}
fetch() {
let { url, options, as='json', cache } = this.props;
if (cache && this.cache[url]) {
// Restore cached state
this.promise = this.cache[url];
this.promise.then(cachedState => this.setStateIfMounted({
request: { ...this.props },
...cachedState
}));
} else {
this.setStateIfMounted({
loading: true,
request: { ...this.props },
});
this.promise = fetch(url, options)
.then(response => {
return response[as]()
.then(data => ({ response, data }))
.catch(error => ({ response, data: error }))
})
.then(({ response, data }) => {
const newState = {
loading: false,
[response.ok ? 'error' : 'data']: undefined, // Clear last response
[response.ok ? 'data' : 'error']: data,
response
}
this.setStateIfMounted(newState);
return newState;
})
if (cache) {
this.cache[url] = this.promise;
}
}
}
setStateIfMounted(nextState, callback) {
// Ignore passing state down if no longer mounted
if (this.mounted) {
this.setState(nextState, callback);
}
}
render() {
return this.props.children(this.state);
}
}
export default Fetch;