基本上,Am试图从轴响应中调用模态类。我想在下面的代码中显示模式弹出而不是警报。谁能帮助您从Axios拦截器函数调用模态类?预先感谢
import React, { Component} from 'react';
import axios from 'axios';
import Modals from '../components/modalAlerts/modalalerts'
const instance = axios.create({
baseURL: 'http://someurl',
timeout: 15000,
});
instance.defaults.headers.common['Authorization'] = //sequrity token will be here
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
alert(error)
return Promise.reject(error);
});
instance.interceptors.response.use(function (config) {
return config;
}, function (error) {
console.log(error)
if(error.response){
if(error.response.status === 401||error.response.status === 403 ){
localStorage.clear()
alert(error.response.data.message)
}else if(error.response.status === 404){
console.log("404")
}else if(error.response.status === 400){
alert(error.response.data.message)
}else{
alert("something went wrong. Please try after sometime..!")
}
}else{
alert("server not found")
}
return Promise.reject(error);
});
export default instance;
这是我的modalalerts.js文件,在渲染中有一些更改,我稍后会进行更改(例如添加更多的字段,例如status具有更多的过滤器)
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
class Modals extends Component {
constructor(props) {
super(props);
this.state = {
modal: true,
}
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal,
});
}
render() {
return (
<div className="animated fadeIn">
<Row>
<Col>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>{this.props.apistatus == 1? "Success" : "Error"}</ModalHeader>
<ModalBody>
{this.props.apistatus == 1? "Form updated successfully" : this.props.errormsg}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>OK</Button>{' '}
{/* <Button color="secondary" onClick={this.toggle}>Cancel</Button> */}
</ModalFooter>
</Modal>
</Col>
</Row>
</div>
);
}
}
export default Modals;