Question

我正在尝试通过查询我的 Netlify 函数从 Snipcart 获取 JSON 产品数据，如下所示：

const fetch = require("isomorphic-fetch");
const {SNIPCART_PRIVATE_KEY} = process.env;

const API_ENDPOINT = "https://app.snipcart.com/api/products";
const {snipcartID} = event.queryStringParameters;

const callAPI = async (event, context) => {
  const auth =
    'Basic ' +
    Buffer.from(SNIPCART_PRIVATE_KEY + ':' + '').toString('base64');
  const t = await fetch(API_ENDPOINT + "?userDefinedId=" + ${snipcartID || 'ABC'}, {
    headers: {
      Authorization: auth,
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then(data => {
      var results;
      if (data) {
        const {items} = data;
        if (items) {
            return {
              name: items[0].name,
              sales: items[0].statistics.numberOfSales,
            };
        }
      }
      return results;
    })
    .catch((error) => ({ statusCode: 422, body: String(error) }));

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
    },
    body: JSON.stringify(t),
  };
};

exports.handler = callAPI;

当我在上面的函数中硬编码 SNIPCART_ID 时，我得到了正确的 JSON 数据。但是我无法使用我的页面的 JavaScript 将我的 Snipcart id 作为参数传递，如下所示：

<script>
  document.addEventListener("click", function (event) {
    if (!event.target.matches("#collapsible")) return;
    let URL = "/.netlify/functions/snipcart-getsales";
    fetch(URL, "ABC")
      .then((response) => response.json())
      .then((data) => renderSales(data))
      .catch(() => renderError());
  });

  function renderSales(data) {
    const name = document.getElementById("name");
    const sales = document.getElementById("sales");
    const error = document.getElementById("error");

    error.innerHTML = "";
    name.innerHTML = data.name;
    sales.innerHTML = data.sales;
  }

  function renderError() {
    const error = document.getElementById("error");
    error.innerHTML = "Whoops, something went wrong. Please try again later!";
  }
</script>

我在这里做错了什么？

Answer 1

您能否在发送 console.log(event) 之前request，以检查您的函数是否获得了发送到 SNIPCART_ID 的正确 request。

Answer 2

经过一番折腾后我想通了:)

const fetch = require("isomorphic-fetch");
const {SNIPCART_PRIVATE_KEY} = process.env;

const API_ENDPOINT = "https://app.snipcart.com/api/products";

const callAPI = async (event, context) => {
  const auth =
    'Basic ' +
    Buffer.from(SNIPCART_PRIVATE_KEY + ':' + '').toString('base64');
  const querystring = event.queryStringParameters;
  const userDefinedId = querystring.userDefinedId || 'ABC';
  const t = await fetch(API_ENDPOINT + "?userDefinedId=" + userDefinedId, {
    headers: {
      Authorization: auth,
      Accept: "application/json",
    },
  })
    .then((response) => response.json())
    .then(data => {
      var results;
      if (data) {
        const {items} = data;
        if (items) {
            return {
              name: items[0].name,
              sales: items[0].statistics.numberOfSales,
            };
        }
      }
      return results;
    })
    .catch((error) => ({ statusCode: 422, body: String(error) }));

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers':
        'Origin, X-Requested-With, Content-Type, Accept',
    },
    body: JSON.stringify(t),
  };
};

exports.handler = callAPI;

将查询参数传递给 Netlify 函数内的 Snipcart API url

2 个答案: