javascript - 如何从函数中调用一个类

Question

基本上，我正在尝试从轴响应调用模型类。我想在代码下方显示模式弹出窗口而不是警报。谁能帮助如何从 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;

Answer 1

像下面做一些事情

为此你需要一个 bool 标志。使用 this.state

在构造函数中初始化 bool 标志

  constructor(props){
      super(props){
          this.state = {
              callModal: false,
              errorMessage: ""
          }
      }
  }

在下面的代码中，您需要将常规函数更改为箭头函数，以便在内部访问 this

 axios.interceptors.response.use(response => {      
    return response;
  }, error => {
    // set callModal flag to true using this.setState
    this.setState({
        callModal: true,
        errorMessage: error
    });
    return Promise.reject(error);
  });

或者绑定(bind)函数使得this可以访问

   axios.interceptors.response.use(function (response) {      
    return response;
  }.bind(this), function (error) {
    // set callModal flag to true using this.setState
    this.setState({
        callModal: true,
        errorMessage: error
    });
    return Promise.reject(error);
  }.bind(this));

现在渲染调用模态类

     render(){
         const { callModal, errorMessage } = this.state;
         return(){
            <div>
                {callModal && <ModalComponent errorMessage={errorMessage} />
            </div>
         }
     }

要使相同的功能第二次工作，您需要在用户使用回调在模态中单击取消按钮时将 callModal 设置为 false