nested fetch api react native 为自定义操作提供不可预测的响应

Question

你好，我正在尝试使用多个 apis 在本机反应中用自定义数据填充数组，但无法这样做，因为嵌套提取 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 在我这边给出了正确的结果，唯一的事情是应该填充最终的 subcategoriesArray。

Answer 1

fetch 是 "asynchronous"，因此您的 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);
});

希望对您有所帮助！ :)

nested fetch api react native 为自定义操作提供不可预测的响应

nested fetch api react native giving unpredictable response for custom operation

react-native

fetch-api