как вызвать класс из функции - PullRequest
Новая
       28

как вызвать класс из функции

0 голосов
/ 01 октября 2018

В основном, я пытаюсь вызвать класс модели из ответа оси.Я хочу показать модальное всплывающее окно вместо предупреждения под кодом.Может кто-нибудь помочь, как вызвать модальный класс из функции перехватчика 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;

1 Ответ

0 голосов
/ 01 октября 2018

Сделайте что-нибудь вроде ниже

Для этого вам нужен логический флаг.Инициализируйте логический флаг в конструкторе, используя this.state

  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);
  });

или связатьфункция, обеспечивающая доступ к 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когда пользователь нажимает кнопку отмены в модальном режиме с помощью обратного вызова

...