ctrlplusb / react-async-bootstrapper

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

Open chiuwingyan opened 5 years ago

chiuwingyan commented 5 years ago

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!