主页 / 问题 / 1407584
Accepted
Dmitriy Begishev
Asked:2022-07-08 01:59:32 +0000 UTC2022-07-08 01:59:32 +0000 UTC

如何更改变量的范围

  • 772

函数 send_url 函数从服务器接收产品列表，然后在render_markets_cards函数中使用该列表，该函数呈现产品卡片。我需要继续使用products数组来进一步将产品添加到购物车中。问题出现在数组products的范围内，即它只存在于其函数内部。

async function send_url(url, store_id, category_id) {
    // функция отправляет на сервер store_id и canonical_url подкатегории с продуктами
    data = [url, store_id];
    let response = await fetch('http://127.0.0.1:8080/send_product_list', {
        method: 'POST', 
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(data)
    })    
    .then(response => response.json()    
    .then(products => {
        rendering_markets_cards(products, category_id);
    })     
    );
}

function rendering_markets_cards(products, category_id) {
    // функция создает картточки с продуктами
    let div  = document.getElementById('products-' + category_id);

    products.forEach(product => {             
        let div_card = document.createElement('div');  
        let image = product.image_urls[0]        
        div_card.innerHTML = `
          <div class='card'>
            <img src="${image}" class='card-img-top'>
            <div class='card-body'>
              <h5 class='card-title'>${product.name}</h5>
              <p class='card-text'>${product.price} руб</p>
              <button type='button' class='btn btn-outline-primary' 
                data-id="${product.id}" 
                data-name="${product.name}" 
                data-price="${product.price}" 
                onclick='add_to_cart(this.dataset.id, this.dataset.name, this.dataset.price)'>
                    Добавить в корзину
              </button>
            </div>
          </div>`;
        div_card.setAttribute('id', product.legacy_product_id);
        div_card.setAttribute('class', 'col');
        div.appendChild(div_card);    
    })    
}

当页面上的用户单击带有产品“添加到购物车”的卡片时，add_to_car t 函数将传递 id、产品名称及其价格作为参数。但我希望能够在购物车中显示更多产品信息。这可以通过增加函数参数的数量和附加信息来完成，但我只想在add_to_cart函数中传递一个参数- id，通过它我可以在products数组中找到对象。如何确定产品数组的范围，以便可以在rendering_markets_cards函数之外调用此变量？

javascript

1 个回答

  1. Best Answer

    你有点混乱。您正在使用async/await，它与承诺一起使用，同时使用then. 为什么不清楚。

    在最简单的情况下，fetch在async函数中使用如下所示：

    async function fetchProducts() {
  const response = await fetch('/products');
  const data = await response.json();      
  // rendering_markets_cards(data.products, data.category_id);
}

    接下来，我们让工作变得简单一点：products我们把它从函数中取出，当我们得到它时，我们将结果输入到函数中：

    let products = [];

async function fetchProducts() {
  const response = await fetch('/products');
  const data = await response.json();
  products = data.products;
}

    但是，重要的部分 (!!!)，因为 由于操作是异步的，因此获取所有数据非常重要，然后才开始与用户进行交互。因此，在请求之前，我们将加载程序挂在模态窗口中的窗口上，并带有“正在加载数据”的字样。并且在接收之后，我们使用加载器删除模态窗口。一切。现在您可以安全地将数据传递给另一个函数并在其他地方使用它

    • 1

相关问题