时间戳

首页 > 解决方案 > 我是 call api 的新手，有人可以帮我解决这个问题。使用 javascript 调用 Api 链接缩短器

javascript - 我是 call api 的新手，有人可以帮我解决这个问题。使用 javascript 调用 Api 链接缩短器

问题描述

所以我有一个任务是调用这个网站的 api：https ://shrtco.de/并使用像他们这样的链接缩短器。但我不知道怎么称呼它。有人可以解释一下如何调用它，或者可以帮助我，非常感谢你们这是我的 HTML 代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>Enter a link</p>
        <input type="text">
        <button>Enter</button> <br>
        <p>Short domain</p>
  <input type="radio" id="domain1" name="fav_language" value="domain1">
  <label for="html">shrtco.de</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">9qr.de</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">shiny.link</label>
  <p>Link generated</p>
  <a href="">ZZZZZ</a>
    </div>
    <script src="getAPI.js"></script>
</body>
</html>

标签： javascripthtml

解决方案

按照界面文档中的示例，我在这里编写了一个最小的说明性示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>shortcode example</title>
    </head>
    <body>
        <input type="text" name="url" id="url" value="" required>
        <button id="submit" type="submit">shorten</button>
        <p id="result"></p>
        <script>
            const button = document.querySelector('button');
            const input = document.querySelector('input');
            const result = document.getElementById('result');

            const shorten = (event) => {
                let value = input.value.trim();

                while (result.firstChild) {
                    result.removeChild(result.firstChild);
                }

                if (!value.length) {
                    throw new Error('well! you have to type in something!');
                }

                let promise = fetch('https://api.shrtco.de/v2/shorten?url=' + value);

                promise.then(response => {
                    if (response.status !== 201) {
                        console.log('Looks like there was a problem: ' + response.status);
                        return;
                    }

                    response.json().then(data => {
                        let link = document.createTextNode(data.result.full_short_link);
                        result.appendChild(link);
                    }).catch(error => {
                        console.log(error.message);
                    })
                });
            }
        
            button.addEventListener('click', shorten, false);
        </script>
    </body>
</html>

这个例子发生了什么？

首先有三个元素 - 一个用于输入要缩短的 url 的输入元素，一个用于提交数据的按钮元素和一个用于显示 api 调用结果的段落。

提交按钮获取一个处理点击事件的 javascript 事件监听器。每次单击该按钮时，都会检查输入元素，如果输入了某些内容。如果输入元素的值有长度，它将被发送到缩短服务。出于这个原因，我们使用javascript fetch api生成了一个承诺。

使用 fetch api 的调用返回一个 javascript 承诺，我们检查响应状态代码。该 api 返回一个 201“已创建”状态代码，表示一切正常。api 需要一点时间来响应，但是我们可以解码 json 响应并在结果段中打印出缩短的链接。

你应该做什么

试着理解给定的例子。请阅读接口文档以获取有关成功案例中可能返回的内容以及请求失败时发生的情况的信息？javascript fetch api 是基本的。

尝试将给定的示例转移到您的应用程序中。如果遇到问题，请详细说明这些问题并寻求解决方案。

推荐阅读