使用createAsyncThunk时，如何处理依赖第一个Fetch的请求并返回数据？

你的代码存在几个问题，导致返回结果为undefined，同时也没保留第一个API的完整响应：

1. Promise链处理逻辑错误：你在第二个then里只返回了第二个API的请求结果，完全丢弃了第一个API的原始数据。而且Promise.all返回的是多个response对象的数组，你直接在后面调用resp.json()是错误的——resp是数组，不是单个response，应该在每个fetch请求后就处理json转换。
2. 响应结构与代码不匹配：你的第一个API响应示例里没有trips数组，但代码里写的是data.trips[0].places，这会直接触发报错，让整个Promise进入rejected状态，最终返回undefined。
3. 异步代码的日志时机错误：result是Promise对象，你在赋值后立刻console.log，此时Promise还处于pending状态，打印的不是最终结果。

下面是修复后的代码，用async/await写法更清晰，同时保留第一个API的完整数据：

export const fetchTrip = createAsyncThunk(
    'trip/fetchTrip',
    async (payload, thunkAPI) => {
        // 1. 获取第一个API的完整响应数据
        const tripResponse = await fetch(
            'http://localhost:5000/user/trip/' + payload, {
            mode: 'cors',
            credentials: 'include',
            method: "get",
            headers: {
                'Content-Type': 'application/json'
            },
        })
        const tripData = await tripResponse.json();

        // 注意：这里根据你的响应示例调整，若实际响应有trips数组，改成tripData.trips[0].places即可
        const places = tripData.places;

        // 2. 批量请求第二个API，获取每个地点的详情
        const placeDetailsPromises = places.map(async (place) => {
            const detailResponse = await fetch('http://localhost:5000/api/tripadvisor/' + place.id);
            return await detailResponse.json();
        });
        const placeDetails = await Promise.all(placeDetailsPromises);

        // 3. 合并原始行程数据与地点详情，返回最终结果
        return {
            ...tripData,
            places: places.map((place, index) => ({
                ...place,
                detail: placeDetails[index]
            }))
        };
    }
)

修复说明 #

• 用async/await替代Promise链，逻辑更直观，避免回调嵌套混乱。
• 先保存第一个API的完整响应tripData，确保原始数据不丢失。
• 对每个地点的fetch请求单独处理json转换，再用Promise.all等待所有请求完成。
• 最后将原始地点数据与对应的详情合并，返回包含完整行程信息和地点详情的对象。

内容的提问来源于stack exchange，提问作者benwl