Question

我试图了解开发人员如何使用Reise-Native的Promise。获得有关如何设置API调用和处理数据的反馈和建议会很棒。请理解我之前从未使用过Promise，并且我是React-Native的新手。

提前谢谢你。关于这个主题的任何资源也是受欢迎的。

伪代码

子

检索两个变量
使用这两个变量构建网址
触发第一个Promise并解决
检索另外两个变量
使用这两个变量构建新的网址
触发第二个Promise并解决
从两个承诺中收集数据并传递给父

父

从Child
从第一个Promise获取数据并设置为州
从第二个Promise获取数据并设置为另一个州

APIservice.js

子

在单独的文件中设置所有API调用是一个好习惯吗？可能在将来我需要进行不同的API调用，你会创建多个函数来处理它吗？

class APIservice {


    _getStopPoint = (endpoint) => {
        return new Promise(function(resolve, reject) {
            fetch(endpoint)
            .then((response) => response.json())
            .then((data) => {
                console.log("APIservice StopPoint", data)
                resolve(data);
            });
        });
    };
};


module.exports = new APIservice

App.js

父

如您所见，我设置端点的方式很蹩脚。它不是理想的，因为URL是相同的。我想构建一些可以接收两个变量并在旅途中构建URL的东西。类似于https://api.tfl.gov.uk/Line/${routeid}/Arrivals/${stationid}。

如果我管理它，我怎样才能将API调用传递给只有一个endpoint的API服务，该API服务会根据收到的两个变量动态地改变？我不确定如何区分Promise.all只有“一个”网址的电话。

这给我带来了另一个问题。在App.js中设置状态时，我应该使用数据中的specifics数组来设置state吗？像bus: data[0]，tube: data[1]这样的东西。这是一个好习惯吗？

let APIservice = require('./APIservice')

let endpoint = 'https://api.tfl.gov.uk/Line/55/Arrivals/490004936E'
let endpoint1 = 'https://api.tfl.gov.uk/Line/Northern/Arrivals/940GZZLUODS'


let loadData = (endPoint) => {

  // Multiple API calls
  Promise.all([
    APIservice._getStopPoint(endpoint),
    APIservice._getStopPoint(endpoint1),
  ])
  .then((data) => {
    console.log("App.js", data)
  })
  .catch((error) => {
    console.log(error)
  })
}

export default class App extends Component {

  componentWillMount() {
    // URL fetch based on variables, not dynamic
    loadData(endpoint)
    loadData(endpoint1)
  }

  render() {
    loadData("hello")
    return (
      <View style={styles.container}>
        <Text>
          Promise
        </Text>
      </View>
    );
  }
}

Answer 1

您可以尝试以下示例

const callbackFn = (firstName, callback) => {
setTimeout(() => {
if (!firstName) return callback(new Error('no first name 
passed in!'))

const fullName = `${firstName} Doe`

return callback(fullName)
  }, 2000)
}

callbackFn('John', console.log)
callbackFn(null, console.log)

React-Native - 承诺设置数据处理

1 个答案: