嵌套获取API原生响应，为自定义操作提供不可预测的响应

Question

嗨，我试图在react native中使用多个API填充自定义数据，但无法这样做，因为嵌套的fetch API给出了不可预测的结果，我的最终数组总是空的。

如有任何帮助，不胜感激

提前感谢下面是我的代码，请告诉我在这里做错了什么。

fetchSubcategories(category_id){

    var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
    const set = [];
    const subcategoriesArray=[];
      fetch(url)
        .then((response) => response.json())
        .then((responseData) => {
          for (var i = 0; i < responseData.length; i++) {
                  set.push(responseData[i]);
          }
          console.log('response subcategories : '+JSON.stringify(set,null,2));

        })
        .then(()=>{
                  for(var j=0;j<set.length;j++){
                      var name=set[j].name;
                      var id=set[j].id;

                     fetch(url)
                        .then((response) => response.json())
                        .then((responseData) => {
                          var subcategory={
                            name:name,
                            id:id,
                            products:[]
                          }
                          subcategoriesArray.push(subcategory);
                        }).done()


                  }
        })
        .done()

        console.log('final custom josn array : '+JSON.stringify(subcategoriesArray,null,2));

}

注意:上面使用的url在我的端给出正确的结果，唯一的事情是最后的subcategoresarray应该被填充。

Answer 1

fetch是"异步的"，因此您的console.log可能在请求实际完成之前运行，但实际上正在填充数组。

测试:尝试将console.log移动到subcategoriesArray.push(subcategory);之后

您应该看到它为每个集合退出数组，但至少您可以看到它实际上正在被填充。

你可以把函数包装在Promise中，这样你就可以在异步填充后得到数组:

fetchSubcategories(category_id){
    return new Promise((resolve, reject) => { // <- add this
        var url=GLOBAL.BASE_URL+'/categories?filter[where][categoryId]='+GLOBAL.CATEGORY_ID+'&filter[where][category_type]=subcategory&filter[order]=name ASC';
        const set = [];
        const subcategoriesArray=[];
        fetch(url)
            .then((response) => response.json())
            .then((responseData) => {
                for (var i = 0; i < responseData.length; i++) {
                    set.push(responseData[i]);
                }
                console.log('response subcategories : '+JSON.stringify(set,null,2));
            })
            .then(()=>{
                for(var j=0;j<set.length;j++){
                    var name=set[j].name;
                    var id=set[j].id;
                    fetch(url)
                        .then((response) => response.json())
                        .then((responseData) => {
                            var subcategory={
                                name:name,
                                id:id,
                                products:[]
                            }
                            subcategoriesArray.push(subcategory);
                            if(j == set.length-1) { // <- add this block 
                                resolve(subcategoriesArray);
                            }
                        }).done();
                }
            }).done()
    });  // <- completes promise block
}

你可以这样使用它:

fetchSubcategories(category_id).then((subCatArray) => {
    console.log('final custom join array', subCatArray);
});

希望这对你有帮助!:)