gpt4 book ai didi

javascript - Promise.all 解决得太早

转载 作者:行者123 更新时间:2023-12-01 03:36:38 24 4
gpt4 key购买 nike

我正在加载存储在多个 JSON 中的论坛数据以显示在网站上,然后使用 React 进行渲染。数据本身分为两种类型的文件:线程数据和用户数据。

// threads/135.json
{
"title": "Thread Title",
"tid": 135,
"posts": [
{
"pid": 1234,
"timestamp": 1034546400,
"body": "First forum post",
"user": 5678
},
{
"pid": 1235,
"timestamp": 103454700,
"body": "Reply to first forum post",
"user": 9876
}
]
}

一旦线程数据加载完毕,就会根据用户ID加载用户数据。

// user/1234.json
{
"id": 1234,
"name": "John Doe",
"location": "USA"
}

实际代码基于Google's Introduction to Promises ,变成一个函数,如下所示:

export default function loadData(id) {

var didLoadUser = [];
var dataUsers = {};
var dataThread = {};

getJSON('./threads/' + id + '.json').then(function(thread) {
dataThread = thread;

// Take an array of promises and wait on them all
return Promise.all(
// Map our array of chapter urls to
// an array of chapter json promises
thread.posts.map(function(post) {
if (post.user > 0 && didLoadUser.indexOf(post.user) === -1) {
didLoadUser.push(post.user);
return getJSON('./users/' + post.user + '.json') ;
}
})
);
}).then(function(users) {
users.forEach(function(user) {
if (typeof user !== 'undefined') {
dataUsers[user.id] = user;
}
});
}).catch(function(err) {
// catch any error that happened so far
console.error(err.message);
}).then(function() {
// use the data
});
}

// unchanged from the mentioned Google article
function getJSON(url) {
return get(url).then(JSON.parse);
}

// unchanged from the mentioned Google article
function get(url) {
// Return a new promise.
return new Promise(function(resolve, reject) {
// Do the usual XHR stuff
var req = new XMLHttpRequest();
req.open('GET', url);

req.onload = function() {
// This is called even on 404 etc
// so check the status
if (req.status == 200) {
// Resolve the promise with the response text
resolve(req.response);
}
else {
// Otherwise reject with the status text
// which will hopefully be a meaningful error
reject(Error(req.statusText));
}
};

// Handle network errors
req.onerror = function() {
reject(Error("Network Error"));
};

// Make the request
req.send();
});
}

在将代码转换为在我的组件的 componentWillMount 函数中调用的函数之前,代码本身运行良好。

componentWillMount: function() {
this.setState({
data: loadData(this.props.params.thread)
})
}

我怀疑错误在于函数本身,因为它看起来像 Promise.all 在加载线程数据之后和加载任何用户数据之前得到解决。

我最近才开始使用 Promise,所以我的知识还比较基础。我究竟做错了什么?我需要将 main 函数包装在另一个 Promise 中吗?

最佳答案

this.setState({
data: loadData(this.props.params.thread)
})

您无法像上面那样从异步调用中返回,因为数据根本没有以同步方式及时准备好。您返回一个 promise ,因此代码应如下所示:

loadData(this.props.params.thread)
.then((data)=> {
this.setState({
data,
})
})

注意:为了让它工作,您需要从 loadData返回 promise ,因此:

...
return getJSON(..
...

关于javascript - Promise.all 解决得太早,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44228287/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com