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

Question

我看到了很多这方面的文档，但没有看到 javascript。我缺乏知识在这里发挥作用，所以请原谅我。我想将一个简单的文本发送到一个输入到输入中的 phone 数字。我设置了一个无服务器函数，但我不知道如何将 phone 数字传递给它，除此之外，我尝试向它写一个 post 请求，但我必须离开。我在做什么可能吗？

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

您需要 bind the value of the <input> to a variable in your script。

<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.

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

How to send a text from an input using twilio and svelte?

api

post

twilio

twilio-api