Question

嗨我正在尝试使用多个apis在本机中使用自定义数据填充数组，但是无法执行此操作，因为嵌套的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));



}

注意：上面使用的网址在我的结尾给出了正确的结果唯一的东西是最终的子类别应该填充。

Answer 1

fetch＆＃34;异步＆＃34;，因此您的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);
});

希望这有帮助！：）

嵌套fetch api反应原生为自定义操作提供不可预测的响应

1 个答案: