Как сделать простой запрос PUT с использованием API выборки, создав собственную библиотеку HTTP?

Опубликовано: 30 Июля, 2021

Метод fetch () используется для отправки запросов на сервер без обновления страницы. Это альтернатива объекту XMLHttpRequest. Он будет использовать поддельный API, который будет содержать массив в качестве примера, и из этого API мы покажем PUT / Обновить данные с помощью метода API выборки, создав пользовательскую библиотеку HTTP. В этом руководстве используется следующий API: https://jsonplaceholder.typicode.com/users/2.

Предпосылка: вы должны знать основы HTML, CSS и JavaScript.

Объяснение: Прежде всего нам нужно создать файл index.html и вставить в него приведенный ниже код файла index.html. Этот файл index.html включает library.js и app.js файл в нижней части тела тега. Теперь в library.js файл, в первую очередь создать ES6 класс EasyHTTP и внутри этого класса есть асинхронная выборка () функция , которая помещает данные в ИПП URL. Ожидается два этапа. Сначала для fetch (), а затем для его ответа. Какой бы ответ мы ни получили, мы возвращаем его вызывающей функции в файле app.js.

Теперь в файле app.js сначала создайте экземпляр класса EasyHTTP. Затем, поместив функцию прототипа, отправьте URL-адрес в файл library.js. Далее в этом есть два обещания, которые необходимо выполнить. Первый предназначен для любых данных ответа, а второй - для любых ошибок.

Имя файла: index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
            content="ie=edge">
    <title>PUT Request</title>
</head>
  
<body>
    <h1>
        Simple PUT request using fetch API 
        by making custom HTTP library
    </h1>
  
    <!-- Including library.js and app.js -->
    <script src="library.js"></script>
    <script src="app.js"></script>
</body>
  
</html>

Имя файла: library.html

 // ES6 class
 class EasyHTTP {
 
   // Make an HTTP PUT Request
   async put(url, data) {
 
    // Awaiting fetch which contains method,
    // headers and content-type and body
    const response = await fetch(url, {
      method: 'PUT' ,
      headers: {
        'Content-type' : 'application/json'
      },
      body: JSON.stringify(data)
    });
     
    // Awaiting response.json()
    const resData = await response.json();
 
    // Return response data
    return resData;
  }
 }

Имя файла: app.html

 // Instantiating new EasyHTTP class
 const http = new EasyHTTP;
 // User Data
 const data = {
    name: 'sunny yadav' ,
    username: 'sunnyyadav' ,
    email: 'sunny@gmail.com'
  }
 
// Update Post
 http.put(
 ' https://jsonplaceholder.typicode.com/users/2 ' ,
     data)
 
// Resolving promise for response data
 .then(data => console.log(data))
 
// Resolving promise for error
 . catch (err => console.log(err)); 

Вывод: Откройте файл index.html в браузере, затем щелкните правой кнопкой мыши -> проверьте элемент -> консоль .
Следующий вывод вы увидите для запроса PUT.

Node.js JavaScript HTML JavaScript-Misc

Как сделать простой запрос PUT с использованием API выборки, создав собственную библиотеку HTTP?

РЕКОМЕНДУЕМЫЕ СТАТЬИ