Execute a bootstrap method on your React/Preact components. Useful for data prefetching and other activities.
MIT License
117
stars
12
forks
source link
When using this library, use axios to make requests in the bootstrap() method of the component. If the url is a full full path, you can request it. If you use node to forward, you can't ask. #13
This is my code: TopicDetail.jsx
class TopicDetail extends React.Component{ constructor(){ super(); this.state={ newReply:'' } } componentDidMount(){ // const id = this._getId(); // this.props.topicStore.getTopicDetail(id); } bootstrap(){ const id = this._getId(); return this.props.topicStore.getTopicDetail(id).then(() => { return true }).catch(() => { return false }); }}
The method of request, written in mobx:@action fetchTopics(tab){ //console.log('tab',tab) return new Promise((resolve,reject) => { // console.log('syncing', this.syncing) this.syncing = true this.topics= [] get('/api/topics',{ mdrender:false, tab:tab }).then(resp => { // console.log('resp',resp) if(resp.success){ resp.data.forEach(topic => { // console.log('topic',topic) this.addTopic(topic) }) resolve() }else{ reject() } }).catch(err => { reject(err) this.syncing = false }) }) }
the get method
export const get = (url,param) => { //console.log('url',url) let params = param || {} return new Promise ((resolve,reject) => { console.log('axios') axios({ method:'get', url, params, }).then((resp) => { console.log('resp1', resp) const data = resp.data; if(data && data.success === true){ resolve(data) }else{ reject(data) } }).catch((err) => { if(err.response){ reject(err.response.data) }else{ reject({ sucess:false, err_msg:err.message }) } }) }) }
server.js
app.use('/api/user', require('./util/handle-login')) app.use('/api', require('./util/proxy'))
I found that I did not intercept 'api' at all.
This problem has been solved for a long time and I hope to get your help. Thank you!