尝试在链中使用fetch并使用回调获取数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了尝试在链中使用fetch并使用回调获取数据相关的知识,希望对你有一定的参考价值。

您好我一直在尝试使用获取链从两个API获取,fetch工作并使用getallproducts函数内的console.log正确显示数据但是当我尝试使用数据对displayproducts函数进行回调时,数据是无处可见。我不知道我到底做错了什么,或者我是否使用了错误的方法,但我一直在尝试多种获取方法。 promise.all似乎是一个解决方案,但也没有用。

showProductsPage函数

function showProductsPage() {
    var page = document.getElementById('products-page');

    hideAllPages();
    //getAllProducts();
displayproducts(getAllProducts);
    page.style.display = 'block';
}

数字产品功能

function getAllProducts(callback){
    var producten; 
var authors; 
    fetch(window.location.href+"api/products")
                .then(response => response.json())              
                .then(data => { 
                         producten = data.products;
                        console.log(data);   
                        callback(data)                
return fetch(window.location.href+"api/authors")
                }).then(response => response.json())              
                .then(data => { 
                         authors = data.authors;
                    callback(data)
                })

}

展示产品功能

function displayproducts(data) {
    console.log(data.products);
    for (var i = 0; i < data.products.length; i++) {

    var card = document.createElement("div");
    var img = document.createElement("img");
    var name = document.createElement("BUTTON");
    var author = document.createElement("p");
    var published = document.createElement("p");
    var price = document.createElement("p");
    var cart = document.createElement("BUTTON");
    document.getElementById("products-page").appendChild(card); 
    //
    card.appendChild(img);
    card.appendChild(name);
    card.appendChild(author);
    card.appendChild(published);
    card.appendChild(price);
    card.appendChild(cart);
    //
    card.setAttribute("class", "book-card");
    img.setAttribute("class", "product-img");
    name.setAttribute("class", "book-title");
    author.setAttribute("class", "author");
    published.setAttribute("class", "published");
    price.setAttribute("class", "price");
    cart.setAttribute("class", "add-to-cart");
    //
    cart.innerhtml = "Add to Cart";
    name.innerHTML = data.products.title;
    price.innerHTML = data.products.price;
};
  //console.log(producten[1].price);
}
答案

你混淆了电话。这个:

 displayproducts(getAllProducts)

一定是:

 getAllProducts(displayproducts);

以上是关于尝试在链中使用fetch并使用回调获取数据的主要内容,如果未能解决你的问题,请参考以下文章

r data.table 围绕 ad-hoc 连接的函数包装器(在链中聚合)

PromiseKit 无法在链中命中

Fetch:使用获取响应设置变量并从函数返回

扭曲的延迟/回调和异步执行

csharp 异常冒泡到第一个在链中调用方法的方法

使用Fetch&promises实现数据交互