Question

我们目前正在使用React-Native开发移动项目。我们的应用程序取决于API。因此，我们使用React的fetch方法从API获取数据。我们的问题是fetch方法基于API的工作方式不同。当我们使用API时，fetch方法会抛出网络请求失败错误。我们已经尝试了另一个公共API进行测试，它运行正常，没有错误。

我在浏览器和Postman（测试API）上测试了所有API，所有这些都正确显示了JSON响应。但是，我们在fetch方法上测试它，它的工作方式不同。以下是了解情况的代码段：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AlertIOS
} from 'react-native';

class Test extends Component {
  constructor() {
    super();

    state = {
      airports: []
    }
  }

  onAfterLoad = (data) => {
    AlertIOS.alert(
      "Fetched Successfully"
    );
    this.setState({
      airports: data.airports
    });
  }

  componentWillMount() {
    // Fails
    let api1 = 'http://kolaybilet.webridge.co/api/v1/airports/ist/';
    // Fails
    let api2 = 'http://jsonplaceholder.typicode.com/posts/1/';
    // Works
    let api3 = 'https://randomuser.me/api/';

    fetch(api1)
      .then((r) => {
        return r.json();
      })
      .then(this.onAfterLoad)
      .catch((e) => {
        AlertIOS.alert("An Error Has Occurred!", e.message);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

Answer 1

该问题围绕iOS中的App Transport Security政策。 randomuser API是SSL，而其他API则不是。

在您的XCode项目的info.plist文件中，在NSAllowsArbitraryLoads字典下添加值NSAppTransportSecurity，其值为YES。这将允许您成功获取其他端点。

React-Native Fetch API基于API进行不同的工作

1 个答案: