如何等待for循环完成后返回结果？GLTFLoader异步加载问题

问题出在gltfLoader.load()是异步方法——for循环只是挨个发起了加载请求，但这些请求还没完成，函数就直接返回了空的allModels数组。

要让函数等所有模型加载完再返回结果，得把每个加载操作包装成Promise，再用Promise.all()统一等待所有加载完成，同时把函数声明为async：

async function modelLoader(source) {
    const gltfLoader = new GLTFLoader()
    // 把每个资源项转成加载模型的Promise
    const modelPromises = source.map(item => {
        return new Promise(resolve => {
            const model = new THREE.Group()
            model.name = item.name
            gltfLoader.load(item.file, gltf => {
                // 将加载后的模型子节点添加到Group
                gltf.scene.children.forEach(child => model.add(child))
                // 加载完成后返回当前模型
                resolve(model)
            })
        })
    })
    // 等待所有模型加载完毕，返回完整的模型数组
    return Promise.all(modelPromises)
}

调用这个函数的时候，因为它返回的是Promise，你需要用await（在async函数内部）或者.then()来获取实际的模型数组：

// 方式1：在async函数里用await
async function initScene() {
    const loadedModels = await modelLoader(你的资源数组)
    // 这里就能拿到所有加载好的模型了
    console.log(loadedModels)
}

// 方式2：用.then()链式调用
modelLoader(你的资源数组).then(loadedModels => {
    console.log(loadedModels)
})

之前你用async/await没拿到实际值，是因为没把gltfLoader.load的回调逻辑包装成Promise，async函数里只有await Promise才能等待异步操作完成，直接await回调式方法是没用的。

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