0Pricing
JavaScript Academy · Aula

Globais, disponibilidade de fetch e APIs de arquivos e rede

Detecte o ambiente de execução com segurança (globalThis/window/global), verifique a disponibilidade de fetch e entenda por que arquivos precisam do Node, enquanto o navegador se concentra em DOM e rede

Globais, disponibilidade de fetch e APIs de arquivos e rede é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.

Visão geral

Objetivo: Saber onde o seu código é executado.

  • Globais: globalThis, window, global
  • fetch: detecte o recurso, não presuma que ele existe
  • Arquivos: o Node tem fs; os navegadores não
  • URLs: URL funciona nos dois ambientes
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 1

Detecção segura do ambiente de execução

Use verificações de typeof para evitar ReferenceErrors e descobrir onde o código está sendo executado.

// Detect presence of common globals
const hasWindow = typeof window !== "undefined";
const hasGlobal = typeof global !== "undefined";
const hasProcess = typeof process !== "undefined" && process && typeof process.version === "string";

console.log("globalThis exists?", typeof globalThis !== "undefined");
console.log("window?", hasWindow);
console.log("global?", hasGlobal);
console.log("Node process?", hasProcess);
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 2

fetch: detecção do recurso

Os navegadores geralmente têm fetch; versões antigas do Node podem não ter. Primeiro, verifique typeof fetch.

// Feature-detect fetch; do not assume it exists everywhere
const hasFetch = typeof fetch === "function";
console.log("fetch available?", hasFetch);

// If available, you could call fetch(...). For a safe demo we only log.
if (!hasFetch) {
  console.log("Provide a fallback or use a library in Node versions without fetch.");
}
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 3

Arquivos: Node versus navegador

O Node disponibiliza fs para arquivos; o navegador não. Mantenha o mesmo caminho de código seguro com uma verificação de recurso.

// Files are a Node concern; browsers cannot read your disk directly
const hasRequire = typeof require === "function";
console.log("CommonJS require available?", hasRequire);

// Safe message instead of real file I/O (keeps the demo runnable everywhere)
if (hasRequire) {
  console.log("In Node you can use fs for files; in browsers you cannot.");
} else {
  console.log("No require here; likely a browser-like or sandboxed runtime.");
}
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 4

Compartilhado: API URL

A classe URL analisa endereços de maneira consistente em diferentes ambientes de execução; é útil para pequenas ferramentas.

// URL is available in both environments
const u = new URL("https://example.com/path?x=1#top");
console.log("host:", u.host);
console.log("pathname:", u.pathname);
console.log("search:", u.search);
console.log("hash:", u.hash);
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 5

Bons hábitos para iniciantes

Dicas:

  • Verifique typeof fetch antes de usá-lo.
  • Arquivos exigem o Node, por exemplo, fs; os navegadores se concentram no DOM e na rede.
  • Use globalThis para globais portáveis.
  • Prefira pequenas verificações de recursos a adivinhar o ambiente.
Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 6

Questionário sobre detecção de fetch

Verificação rápida: Detecte fetch com segurança.

Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 7

Recapitulação

Recapitulação: Detecte o ambiente de execução com verificações seguras de typeof, detecte o recurso fetch, lembre-se de que os arquivos ficam no lado do Node e use URL nos dois ambientes.

Globais, disponibilidade de fetch e APIs de arquivos e rede — ilustração 8

Perguntas Frequentes

A aula “Globais, disponibilidade de fetch e APIs de arquivos e rede” é grátis?

Sim — o texto completo de “Globais, disponibilidade de fetch e APIs de arquivos e rede” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.

O que vou aprender em “Globais, disponibilidade de fetch e APIs de arquivos e rede”?

Detecte o ambiente de execução com segurança (globalThis/window/global), verifique a disponibilidade de fetch e entenda por que arquivos precisam do Node, enquanto o navegador se concentra em DOM e r… Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Globais, disponibilidade de fetch e APIs de arquivos e rede”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Globais, disponibilidade de fetch e APIs de arquivos e rede
  2. Particularidades do carregador ESM e diferenças entre caminho e URL
  3. Variáveis de ambiente e padrões de configuração
← Voltar para JavaScript Academy