Buscar resposta - Escopo, Global

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 12 min. de leitura

    • . Buscar resposta A API fornece métodos para criar um novo objeto de resposta e para lidar com o corpo de resposta criado por um Buscar solicitação Método de API.

    . Buscar resposta A API faz parte de um conjunto de Buscar APIs, que fornecem várias ações para buscar recursos de sites externos. Completo Buscar A coleção de APIs inclui:

    Para oferecer suporte a ações de busca, a propriedade do sistema, glide.hosts.allowlist permite controles sobre o que hosts um método de busca pode acessar. Aplica-se a APIs HTTP como RestMessageV2 e os mencionados acima. Para obter mais informações sobre glide.hosts.allowlist , consulte Available system properties.

    Propriedades da resposta

    . Resposta A API fornece propriedades que retornam detalhes sobre a resposta HTTP. Essas propriedades permitem que você acesse metadados (como status , cabeçalhos , tipo e o corpo da resposta ( corpo ) para processamento adicional. Eles permitem verificar o sucesso de uma solicitação ( ok E analisando os dados retornados em vários formatos (por exemplo, JSON ou texto). Essas propriedades são importantes para validar e lidar com respostas do servidor em aplicações do lado do cliente. Para ler explicações mais detalhadas sobre cada propriedade, consulte https://developer.mozilla.org/en-US/docs/Web/API/Response.

    Tabela 1. Propriedades da resposta
    Nome da propriedade Descrição Exemplo
    corpo Pronto. Contém um fluxo legível de dados de bytes no conteúdo do corpo da resposta.

    Valores válidos: Um ReadableStream ou nulo.

    Tipo de dados: Cadeia de caracteres

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.body; // ReadableStream
    Corpo usado Pronto. Sinalizador que indica se o corpo ainda foi lido.
    Valores aceitos:
    • Verdadeiro: O corpo foi lido.
    • Falso: O corpo não foi lido.

    Tipo de dados: Booliano

    		 
    const request = new Request("/myEndpoint", {
  method: "POST",
  body: "Hello world",
});

request.bodyUsed; // false

request.text().then((bodyAsText) => {
  console.log(request.bodyUsed); // true
});
    cabeçalhos Somente leitura. O objeto Cabeçalhos associado à resposta.

    Tipo de dados: Objeto de cabeçalhos

    		 
    const myRequest = new Request("flowers.jpg");
const myHeaders = myRequest.headers; // Headers {}
    ok Pronto. Sinalizador que indica se a resposta foi bem-sucedida (status no intervalo de 200 a 299) ou não.
    Valores aceitos:
    • Verdadeiro: A resposta foi bem-sucedida.
    • Falso: A resposta não foi bem-sucedida.

    Tipo de dados: Booliano

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  console.log(response.ok); // returns true if the response returned successfully
  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
    redirecionado Somente leitura. Sinalizador que indica se a resposta é um resultado do redirecionamento da solicitação.
    Valores aceitos:
    • verdadeiro: a solicitação foi redirecionada.
    • falso: a solicitação não foi redirecionada.

    Tipo de dados: Booliano

    		 
    const myRequest = new Request("flowers.jpg");
const myCred = myRequest.redirect;
    status Somente leitura. Códigos de status HTTP da resposta. Por exemplo, 200 para um sucesso.

    Tipo de dados: Número

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.status =", response.status); // response.status = 200
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    StatusText Somente leitura. Mensagem de status correspondente ao código de status HTTP em response.status. Por exemplo, seria OK para um código de status 200 , Continuar para 100 , Não encontrado para 404 .

    Tipo de dados: Cadeia de caracteres

    		 
    const myRequest = new Request("flowers.jpg");

 // Log the HTTP status and status text
    console.log(`Status: ${response.status}`);
    console.log(`Status Text: ${response.statusText}`);
    
    // Check if the response is successful
    if (response.ok) {
      console.log("Request succeeded!");
    } else {
      console.log("Request failed.");
    }
  } catch (error) {
    console.error("Error fetching the URL:", error);
  }
}
    tipo Somente leitura. Tipo de resposta.
    Valores aceitos:
    • Resposta normal, mesma origem, com todos os cabeçalhos expostos, exceto "Set-Cookie".
    • cors: A resposta foi recebida de uma solicitação de origem cruzada válida. Determinados cabeçalhos e o corpo podem ser acessados.
    • Erro: Erro de rede. Não há informações úteis que descrevam o erro disponíveis. O status da Resposta é 0, os cabeçalhos estão vazios e imutáveis. Este é o tipo de uma Resposta obtida de Response.error() .
    • Opaque: Resposta para solicitação "no-cors" para recurso de origem cruzada. Severamente restrito.
    • Oaqueredirect: A solicitação de busca foi feita com redirecionar: "manual" . O status da resposta é 0, os cabeçalhos estão vazios, o corpo é nulo e o trailer está vazio.

    Tipo de dados: Cadeia de caracteres

    		 
    const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => {
    console.log("response.type =", response.type); // response.type = 'basic'
    return response.blob();
  })
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
    URL Somente leitura. URL da resposta.

    Tipo de dados: Cadeia de caracteres

    		 
    const myRequest = new Request("flowers.jpg");
const myURL = myRequest.url; // "https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request/flowers.jpg"

    Buscar resposta - Resposta (corpo do objeto, opções do objeto)

    Cria um novo objeto de resposta usando Resposta () construtor.

    Tabela 2. Parâmetros
    Nome Tipo Descrição
    corpo Objeto Opcional. Um objeto que define um corpo para a resposta.
    Tipos válidos:
    • ArrayBuffer
    • Blob
    • Exibição de dados
    • FormData
    • ReadableStream
    • Cadeia de caracteres
    • Cadeia de caracteres literal
    • TypedArray
    • URLSearchParams

    Padrão: Nulo
    opções Objeto Opcional. Um objeto de opções que contém todas as configurações personalizadas que você deseja aplicar à resposta ou um objeto vazio (que é o valor padrão). As opções possíveis são:
    • Cabeçalhos: Todos os cabeçalhos que você deseja adicionar à sua resposta, contidos em um Buscar cabeçalhos - Escopo, Global objeto ou objeto literal de pares de chave/valor de cadeia de caracteres (consulte Cabeçalhos HTTP para obter uma referência). Vazio por padrão.
    • Status: O código de status da resposta. O valor padrão é 200 .
    • StatusText: A mensagem de status associada ao código de status, como "OK" . O valor padrão é "" .

    Neste exemplo, criamos um novo objeto Response usando o construtor, passando um novo blob como um corpo e um objeto init contendo status personalizado e opções statusText:

    const myBlob = new Blob();
const myOptions = { status: 200, statusText: "Status message!" };
const myResponse = new Response(myBlob, myOptions);

    Buscar resposta - arrayBuffer()

    Retorna uma promessa que resolve com um ArrayBuffer.

    . ArrayBuffer() o método é útil ao trabalhar com dados binários, como imagens, arquivos de áudio ou qualquer outro arquivo binário que precise ser processado.

    Tabela 3. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 4. Retorna
    Tipo Descrição
    Objeto Uma promessa que resolve com um ArrayBuffer , que representa um buffer de dados binários brutos genéricos.
    Tabela 5. Exceções
    Exceção Descrição
    DOMException - AbortError Uma exceção informando que a solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).
    RangeError Houve um problema ao criar o associado ArrayBuffer . Por exemplo, se o tamanho dos dados for muito grande.
    O script de exemplo a seguir busca dados binários de um servidor e os processa ao utilizar o. ArrayBuffer() método usando estas etapas:
    1. buscar() Busca um recurso da URL especificada.
    2. response.ok: Verifica se o status da resposta está no intervalo 200-299.
    3. ArrayBuffer() Lê o corpo da resposta e o converte em um ArrayBuffer, que representa um buffer de dados binários brutos genéricos de tamanho fixo.
    4. Uint8Array: Converte o ArrayBuffer em um Uint8Array, que é uma matriz de tipo para facilitar a manipulação de dados binários.
    javascriptCopy code// Simple API to fetch binary data and process it using arrayBuffer()asyncfunctionfetchBinaryData(url) {
  try {
    // Fetch the resource from the provided URLconst response = awaitfetch(url);

    // Check if the response is successfulif (!response.ok) {
      thrownewError(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to an ArrayBufferconst arrayBuffer = await response.arrayBuffer();

    // Process the ArrayBuffer (e.g., convert it to a typed array)const uint8Array = newUint8Array(arrayBuffer);

    // Return the processed datareturn uint8Array;
  } catch (error) {
    console.error("Error fetching or processing binary data:", error);
    throw error;
  }
}

// Example usageconst binaryDataUrl = 'https://example.com/path/to/binary/data';

fetchBinaryData(binaryDataUrl)
  .then((data) => {
    console.log("Binary data as Uint8Array:", data);
    // Further processing can be done here, e.g., rendering an image or playing audio
  })
  .catch((error) => {
    console.error("Failed to fetch binary data:", error);
  });

    Buscar resposta - blob()

    Retorna uma promessa que resolve com um blob.

    Tabela 6. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 7. Retorna
    Tipo Descrição
    Objeto Uma promessa que resolve com um Blob .
    Tabela 8. Exceções
    Exceção Descrição
    DOMException - AbortError Uma exceção informando que a solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).
    O exemplo a seguir demonstra como usar o. blob() método com Buscar API usando as etapas a seguir. Este caso de uso é ótimo para buscar imagens ou outro conteúdo binário (como vídeos ou PDFs) e exibi-los dinamicamente.
    1. buscar (url) Busca um recurso da URL especificada.
    2. response.blob() Converte o corpo da resposta em um objeto Blob, que representa dados binários.
    3. CreateObjectURL(blob) Gera uma URL temporária para o blob, que pode ser usada no DOM (por exemplo, como uma fonte de imagem).
    4. Anexando a imagem ao DOM: Cria dinamicamente um elemento de imagem, define o URL do blob como sua origem e o anexa ao corpo do documento.
    
async function fetchBlob(url) {
  try {
    // Fetch the resource from the provided URL
    const response = await fetch(url);

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Convert the response body to a Blob
    const blob = await response.blob();

    // Create a URL for the Blob and log it
    const blobUrl = URL.createObjectURL(blob);
    console.log("Blob URL:", blobUrl);

    // For example, you can set it as the source of an image
    const img = document.createElement('img');
    img.src = blobUrl;
    img.alt = "Fetched Blob Image";
    document.body.appendChild(img);
  } catch (error) {
    console.error("Error fetching or processing blob:", error);
  }
}

// Example usage with an image URL
const imageUrl = 'https://via.placeholder.com/150';
fetchBlob(imageUrl);

    Buscar resposta - bytes ()

    Retorna uma promessa que resolve com um Uint8Array.

    Tabela 9. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 10. Retorna
    Tipo Descrição
    Objeto Uma promessa que resolve com um Uint8Array.
    Tabela 11. Exceções
    Exceção Descrição
    DOMException- Erro de Abort A solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).
    RangeError Houve um problema ao criar o associado ArrayBuffer . Por exemplo, se o tamanho dos dados for muito grande.

    O exemplo a seguir mostra como buscar um arquivo de texto, retornar o corpo como uma Uint8Array e decodificá-lo em uma cadeia de caracteres.

    const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);

    Buscar resposta - formData()

    Retorna uma promessa que resolve com um objeto FormData.

    Tabela 12. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 13. Retorna
    Tipo Descrição
    Objeto Uma promessa que resolve com um FormData objeto.
    Tabela 14. Exceções
    Exceção Descrição
    DOMException- Erro de Abort A solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).
    O exemplo a seguir demonstra como usar FormData() para processar uma resposta de envio de formulário usando as seguintes etapas:
    1. Corpo da solicitação: Usado JSON.stringify() Para enviar os dados do formulário como JSON em vez de parâmetros codificados por URL.
    2. Content-Type: Defina como aplicação/json para indicar o formato do corpo da solicitação.
    // Example of using Response.formData()
async function fetchFormData(url) {
  try {
    // Make a POST request to fetch the form data
    const response = await fetch(url, {
      method: 'POST',
      body: JSON.stringify({
        name: 'John Doe',
        email: 'john.doe@example.com',
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // Check if the response is successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the response as FormData
    const formData = await response.formData();

    // Iterate through the FormData entries
    for (const [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  } catch (error) {
    console.error("Error fetching or processing form data:", error);
  }
}

// Example usage
const formEndpoint = 'https://httpbin.org/post'; // Replace with your form endpoint
fetchFormData(formEndpoint);

    Saída:

    name: John Doe
email: john.doe@example.com

    Buscar resposta - json()

    Retorna uma promessa que resolve o resultado da análise do texto do corpo como JSON.

    Nota:
    Apesar do nome deste método, o resultado de json() Não é JSON, mas é o resultado de usar JSON como entrada e analisá-lo para produzir um objeto JavaScript.
    Tabela 15. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 16. Retorna
    Tipo Descrição
    Objeto Uma promessa que resolve um objeto JavaScript. Este objeto pode ser qualquer coisa que possa ser representada por JSON, como um objeto, matriz, cadeia de caracteres, número, e assim por diante.
    Tabela 17. Exceções
    Exceção Descrição
    DOMException- Erro de Abort A solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).
    SintaxError O corpo da resposta não pode ser analisado como JSON.
    O exemplo a seguir demonstra como usar json() para formar uma resposta:
    1. buscar() Faz uma solicitação GET para o URL.
    2. . response.okverifica se a solicitação foi bem-sucedida (códigos de status 200 a 299).
    3. Se bem-sucedido, response.json() É chamado para analisar os dados JSON da resposta.
    4. Os dados analisados são registrados em log nos logs do sistema usando Console API. Se ocorrer algum erro durante a solicitação ou análise, ele será detectado e registrado em log.
    fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

    Buscar resposta - text()

    Lê o corpo da resposta e o retorna como uma cadeia de caracteres simples. A resposta é sempre decodificada usando UTF-8.

    . texto () O método é útil para respostas que contêm dados textuais, como HTML, JSON (se você quiser manipulá-los manualmente), XML ou arquivos de texto simples que devem ser tratados como cadeias de caracteres simples.

    Tabela 18. Parâmetros
    Nome Tipo Descrição
    Nenhum
    Tabela 19. Retorna
    Tipo Descrição
    Nenhum(a) Uma promessa que resolve com uma cadeia de caracteres UTF-8-enconded.
    Tabela 20. Exceções
    Exceção Descrição
    DOMException- Erro de Abort A solicitação foi anulada.
    TypeError Lançado por um dos seguintes motivos:
    • O corpo da resposta está interrompido ou bloqueado.
    • Ocorreu um erro ao decodificar o conteúdo do corpo (por exemplo, porque o cabeçalho Content-Encoding está incorreto).

    O exemplo a seguir mostra como é uma maneira simples de usar texto () quando o servidor retorna texto sem formatação, como Olá, mundo! Esta é uma resposta de amostra .

    const response = awaitfetch('https://example.com/text-endpoint');
const text = await response.text();
console.log(text); // Outputs: Hello, world! This is a sample response.

    Saída:

    Hello, world! This is a sample response.