如何向 TinyURL 发出 fetch 请求？

Question

我正在尝试向 tinyURL 发出获取请求，特别是发布请求，以缩短在我的网站上生成的 url。这是 tinyURL API

目前，我正在编写这样的代码，但它似乎没有返回短网址。

tinyurl 这个词似乎在链接中被禁止，所以所有链接 包含单词 tinyurl 已替换为“SHORT”

这是 tinyURL API https://SHORT.com/app/dev

import * as React from 'react'

interface tinyURlProps {   url: string } export const useTinyURL = ({ url }: tinyURlProps) => {   React.useEffect(() => {
    const apiURL = 'https://api.SHORT.com/create'
    const data = JSON.stringify({ url: url, domain: 'tiny.one' })

    const options = {
      method: 'POST',
      body: data,
      headers: {
        Authorization:
          'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    } as RequestInit

    fetch(apiURL, options)
      .then((response) => console.log(response))
      .then((error) => console.error(error))

    console.log('TinyUrl ran')   }, [url]) 
}

Answer 1

下面的 sn-p 似乎可以工作

const qs = selector => document.querySelector(selector);
let body = {
  url: `https://stackoverflow.com/questions/66991259/how-to-make-a-fetch-request-to-tinyurl`,
  domain: `tiny.one`
}

fetch(`https://api.tinyurl.com/create`, {
    method: `POST`,
    headers: {
      accept: `application/json`,
      authorization: `Bearer 2nLQGpsuegHP8l8J0Uq1TsVkCzP3un3T23uQ5YovVf5lvvGOucGmFOYRVj6L`,
      'content-type': `application/json`,
    },
    body: JSON.stringify(body)
  })
  .then(response => {
    if (response.status != 200) throw `There was a problem with the fetch operation. Status Code: ${response.status}`;
    return response.json()
  })
  .then(data => {
    qs(`#output>pre`).innerText = JSON.stringify(data, null, 3);
    qs(`#link`).href = data.data.tiny_url;
    qs(`#link`).innerText = data.data.tiny_url;
  })
  .catch(error => console.error(error));

body {
  font-family: calibri;
}

<p><a id="link" /></p>
<span id="output"><pre/></span>