React本机-承诺安装e数据处理
React本机-承诺安装e数据处理
提问于 2018-02-23 11:37:54
我正在尝试理解开发人员如何使用-本机。很好地获得关于如何设置API调用和处理数据的反馈和建议。请理解，我从来没有使用过承诺，我是新的反应-本地人。
提前谢谢你。任何有关这一主题的资源也是受欢迎的。
伪码
孩子
- 检索两个变量
- 使用这两个变量构建URL
- 触发第一个承诺和决心
- 检索另外两个变量
- 使用这两个变量构建一个新的URL
- 触发第二个承诺和决心
- 收集来自两个承诺的数据并传递给家长。
父级
- 从儿童中检索数据
- 获取第一个承诺中的数据，并将其设置为
- 从第二个承诺中获取数据并设置为另一个状态
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 APIserviceApp.js
父级
正如您所看到的，我设置端点的方式很糟糕。这并不理想，因为URL是相同的。我想构造一些可以接收两个变量的内容，并在运行过程中构建URL。有点像https://api.tfl.gov.uk/Line/${routeid}/Arrivals/${stationid}。
如果我做到了这一点，如何将API调用传递给只有一个将根据接收到的两个变量动态变化的APIservice的endpoint？我不知道如何区分Promise.all中只有“一个”URL的调用。
这给我带来了另一个问题。当在App.js中设置状态时，我是否应该使用来自数据的特定数组来setState？有点像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>
);
}
}回答 1
Stack Overflow用户
发布于 2020-01-12 09:49:29
您可以试试这个例子。
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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48946988
复制相关文章
相似问题
腾讯云开发者
