JavaScript | Método de búsqueda()

El método fetch() en JavaScript se usa para solicitar al servidor y cargar la información en las páginas web. La solicitud puede ser de cualquier API que devuelva los datos del formato JSON o XML. Este método devuelve una promesa.

Sintaxis:

fetch('url')           //api for the get request
  .then(response => response.json())
  .then(data => console.log(data));

Parámetros: este método acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

  • URL: Es la URL a la que se va a realizar la solicitud.
  • Opciones: Es una array de propiedades. Es un parámetro opcional .

Valor de retorno: Devuelve una promesa ya sea que se resuelva o no. Los datos de retorno pueden tener el formato JSON o XML. Puede ser una array de objetos o simplemente un solo objeto.

Ejemplo 1:

NOTA: Sin opciones, Fetch siempre actuará como una solicitud de obtención.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>JavaScript | fetch() Method</title>
</head>
<body>
    <script>
        // API for get requests
        let fetchRes = fetch(
"https://jsonplaceholder.typicode.com/todos/1");
        // fetchRes is the promise to resolve
        // it by using.then() method
        fetchRes.then(res =>
            res.json()).then(d => {
                console.log(d)
            })
    </script>
</body>
</html>

Producción:

Hacer una solicitud de publicación usando Fetch: Las requests de publicación se pueden hacer usando fetch dando opciones como se indica a continuación:

let options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(data)
}

Ejemplo 2:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
       content="width=device-width, initial-scale=1.0">
    <title>JavaScript | fetch() Method</title>
</head>
<body>
    <script>
        user = {
            "name": "Geeks for Geeks",
            "age": "23"
        }
        // Options to be given as parameter
        // in fetch for making requests
        // other then GET
        let options = {
            method: 'POST',
            headers: {
                'Content-Type':
                    'application/json;charset=utf-8'
            },
            body: JSON.stringify(user)
        }
        // Fake api for making post requests
        let fetchRes = fetch(
"http://dummy.restapiexample.com/api/v1/create",
                                        options);
        fetchRes.then(res =>
            res.json()).then(d => {
                console.log(d)
            })
    </script>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por TARuN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *