react-native - 在 native react 中显示来自服务类的警报

Question

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

我已经准备好基本的 HTTP 服务类，但我无法显示来 self 的 HTTP 服务的警报，因为它不是 React 组件，我想知道我是否可以使用这样的全局服务类并仍然触发 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
    }  
  }

}