Блог

Главная - Вопросы по программированию - Я новичок в API вызовов , может ли кто-нибудь помочь мне в этом . Сокращение ссылок Api вызова с помощью javascript

Я новичок в API вызовов , может ли кто-нибудь помочь мне в этом . Сокращение ссылок Api вызова с помощью javascript

#javascript #html

Вопрос:

Поэтому у меня есть миссия-вызвать 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>

Комментарии:

1. Вы ознакомились с примечаниями к API разработчика? Там описан полный пример. Можете ли вы более конкретно рассказать о своей проблеме? Что вы до сих пор пытались назвать API?

Ответ №1:

Следуя примеру из документации по интерфейсу, я запрограммировал здесь минимальный иллюстративный пример.

 <!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, который обрабатывает события щелчка. Каждый раз, когда вы нажимаете на эту кнопку, элемент ввода будет проверяться, если что-то было введено. Если значение входного элемента имеет длину, оно будет отправлено в службу сокращения. По этой причине мы даем обещание с помощью api выборки javascript.

Вызов с помощью api выборки возвращает обещание javascript, которое мы проверяем на наличие кода состояния ответа. api возвращает код статуса 201 «Создано», который говорит, что все в порядке. Api требуется немного времени для ответа, но затем мы можем расшифровать ответ json и распечатать сокращенную ссылку в абзаце результата.

Что вам следует делать

Попробуйте понять приведенный пример. Пожалуйста, прочтите документацию по интерфейсу, чтобы получить информацию о том, что может быть возвращено в случае успеха и что происходит, когда запрос завершается неудачно? Api выборки javascript является элементарным для этого.

Попробуйте перенести данный пример в свое приложение. Если у вас возникнут проблемы, подробно объясните эти проблемы и попросите их решить.

Метки: ,