如何从函数中调用类

时间:2018-10-03 05:52:22

标签: javascript reactjs axios interceptor

基本上,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;

0 个答案:

没有答案