Question

我有一个HTTP服务类，负责与基于Laravel的API进行通信。我希望HTTP服务类在存在401身份验证问题时触发React Native Alert框。或403访问被拒绝问题或422是验证问题。

我已经准备好基本的HTTP服务类，但是由于它不是React组件，所以我无法从HTTP服务中显示警报，我想知道是否可以使用此类全局服务类并仍然触发Native组件。

下面是我的代码：

import axios from 'axios';
import {
  AsyncStorage,
  Alert
} from 'react-native';

class HttpService {
  async get(url) {
    let at = await AsyncStorage.getItem('access_token', (error, accessToken) => {
      return accessToken;
    });

    let data = await axios.get(url, {headers: { 'Authorization': 'Bearer ' + at }})
      .then(response => {
        console.log('response', response);
        return response;
      })
      .catch(error => {
        let message, title = '';

        if (!error.response) {
          message = error;
        }

        if (error.response.status === 401) {
          message = error.response.data.message;
          title = 'Authentication issue'
        }

        Alert.alert(title, message, [
          { text: 'Ok', onPress: () => console.log(123) }
        ]);
      });

    return data;
  }

  post() {}
}

export default HttpService;

Answer 1

为什么不只返回错误呢？因此，您可以确定发生了什么，以便进行HttpService调用的组件知道何时显示警报。

class yourComponent extends Component{

  constructor() {
    this.state = {
      token: null,
      isLoaded: false,
      error: null
    }
  }

  componentDidMount() {
    HttpService.get('someUrl')
      .then(res => {
        this.setState({
          token: res,
          isLoaded: true
        });
      }, (error) => {
        this.setState({
          error: error,
          isLoaded: true
        });
      })      
    }
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      // return your Alert here
    } else if (!isLoaded) {
      // return loading component;
    } else {
      // return your main component
    }  
  }

}

在本地反应中显示来自服务类的警报

1 个答案: