如何使用 twilio 和 svelte 从输入发送文本？

Question

我看到了很多这方面的文档，但没有看到 javascript。我的知识匮乏在这里发挥了作用，所以请原谅我。我想向输入中输入的电话号码发送简单的文本。我设置了一个无服务器功能，但我不知道如何将电话号码传递给它，除此之外，我尝试向它写入一个发布请求，但我肯定还很遥远。我正在做的事情可能吗？

let phoneNumber;

const handleSendText = () => {
    fetch("https://svelte-service-xxxx.twil.io/sms", {
      method: "post",
      body: "This is a test",
      headers: {
        "Content-Type": "application/json",
      },
      to: JSON.stringify(phoneNumber),
      from: "+xxxxxxxxxxx",
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error("failed");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

 <input type="text" placeholder="phone number" />
 <button on:click={handleSendText}>Send</button>

Answer 1

您需要将的值绑定到变量在你的脚本中。

<script>
let phoneNumber = "";

const handleSendText = () => { // we'll come back to this };
</script>

<input type="text" placeholder="phone number" bind:value={phoneNumber} />
<button on:click={handleSendText}>Send</button>

这使得当您更改输入中的值时，它会更新 phoneNumber 变量。

现在，在您的 handleSendText 函数中，您需要发送请求的 body 内的所有参数。请注意，在以下代码中，body 如何包含要在一个 JSON 字符串化对象中发送的所有参数。

const handleSendText = () => {
  fetch("https://svelte-service-9106.twil.io/sms", {
    method: "POST",
    body: JSON.stringify({
      to: phoneNumber,
      from: "+18035298025"
    }),
    headers: {
      "Content-Type": "application/json",
    }
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error("failed");
    } else {
      console.log("Success!");
    }
  })
  .catch((err) => {
    console.log(err);
  });
};

然后，在 Twilio 函数中，您将能够访问在 event 对象中发送的参数。在本例中，您将拥有 event.to 和 event.from。