# TypeScript / JavaScript
URL: /docs/examples/typescript.mdx

Exemplos de integração da API brapi.dev usando TypeScript e JavaScript com fetch nativo e Axios. Aprenda a buscar cotações de ações da B3 em aplicações web e Node.js.

***

title: 'TypeScript / JavaScript'
description: >-
Exemplos de integração da API brapi.dev usando TypeScript e JavaScript com
fetch nativo e Axios. Aprenda a buscar cotações de ações da B3 em aplicações
web e Node.js.
full: false
keywords:
brapi, api, typescript, javascript, fetch, axios, node.js, web
openGraph:
title: Integração TypeScript/JavaScript - brapi.dev
description: >-
Exemplos práticos de integração com fetch e Axios para buscar cotações da B3
type: website
locale: pt\_BR
lastUpdated: '2025-10-12T17:30:00.000Z'
lang: pt-BR
howToSteps:

* name: 'Escolha sua abordagem: SDK oficial ou fetch/Axios'
  text: 'Recomendamos usar a SDK oficial (npm install brapi) para tipos completos e retry automático. Se preferir controle manual, use fetch nativo ou Axios.'
* name: 'Configure seu token de API'
  text: 'Armazene seu token em variáveis de ambiente (process.env.BRAPI\_TOKEN). Nunca exponha o token no código frontend.'
* name: 'Faça a requisição para a API'
  text: 'Com fetch: await fetch(`https://brapi.dev/api/quote/PETR4?token=${token}`). Com Axios: await axios.get(url).'
* name: 'Parse e use os dados retornados'
  text: 'O retorno contém results com array de cotações. Acesse data.results\[0].regularMarketPrice para o preço atual.'
* name: 'Implemente cache e tratamento de erros'
  text: 'Use try/catch para erros de rede. Implemente cache (ex: Next.js revalidate, SWR, Map) para economizar requisições.'
  howToTools:
* 'Node.js ou navegador moderno'
* 'npm, yarn ou bun'
* 'Editor de código'
  howToSupplies:
* 'Conta brapi.dev'
* 'Token de API brapi.dev'
* 'Projeto JavaScript/TypeScript'

***

Integre a API brapi.dev em suas aplicações TypeScript e JavaScript usando nossa SDK oficial ou fetch/Axios.

## 🎉 SDK Oficial Disponível!

A brapi.dev agora oferece uma **SDK oficial TypeScript/JavaScript** que facilita muito a integração:

```bash
npm install brapi
```

**Vantagens da SDK:**

* ✅ Tipos TypeScript completos com IntelliSense
* ✅ Tratamento de erros automático
* ✅ Retry inteligente em falhas
* ✅ Suporte a Node.js e navegador

**Exemplo rápido:**

```typescript
import Brapi from 'brapi';

const client = new Brapi({
  apiKey: process.env.BRAPI_API_KEY,
});

const quote = await client.quote.retrieve('PETR4');
console.log(quote.results[0].regularMarketPrice);
```

📚 **[Ver documentação completa da SDK](/docs/sdks/typescript)**

***

## Integração Manual (Sem SDK)

Se preferir fazer requisições HTTP diretamente, veja os exemplos abaixo.

## Usando Fetch (Nativo)

O fetch é nativo em navegadores modernos e Node.js 18+, sem necessidade de bibliotecas externas.

### Exemplo Básico

```typescript
const fetchQuote = async () => {
  const token = 'SEU_TOKEN';
  const ticker = 'PETR4';
  
  const response = await fetch(
    `https://brapi.dev/api/quote/${ticker}?token=${token}`
  );
  
  const data = await response.json();
  console.log(data);
};

fetchQuote();
```

### Com Tratamento de Erros

```typescript
interface QuoteResult {
  results: Array<{
    symbol: string;
    shortName: string;
    regularMarketPrice: number;
    regularMarketChange: number;
    regularMarketChangePercent: number;
    currency: string;
  }>;
}

const fetchQuote = async (ticker: string): Promise<QuoteResult | null> => {
  const token = process.env.BRAPI_TOKEN || 'SEU_TOKEN';
  
  try {
    const response = await fetch(
      `https://brapi.dev/api/quote/${ticker}?token=${token}`
    );
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data: QuoteResult = await response.json();
    return data;
  } catch (error) {
    console.error('Erro ao buscar cotação:', error);
    return null;
  }
};

// Uso
fetchQuote('PETR4').then(data => {
  if (data && data.results[0]) {
    const quote = data.results[0];
    console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  }
});
```

### Múltiplos Tickers

```typescript
const fetchMultipleQuotes = async (tickers: string[]) => {
  const token = 'SEU_TOKEN';
  const tickersParam = tickers.join(',');
  
  const response = await fetch(
    `https://brapi.dev/api/quote/${tickersParam}?token=${token}`
  );
  
  const data = await response.json();
  return data.results;
};

// Uso
fetchMultipleQuotes(['PETR4', 'VALE3', 'ITUB4']).then(quotes => {
  quotes.forEach(quote => {
    console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  });
});
```

## Usando Axios

Axios é uma biblioteca popular para fazer requisições HTTP, com sintaxe mais simples e recursos adicionais.

### Instalação

```bash
npm install axios
# ou
yarn add axios
# ou
bun add axios
```

### Exemplo Básico

```typescript
import axios from 'axios';

const token = 'SEU_TOKEN';
const ticker = 'PETR4';
const url = `https://brapi.dev/api/quote/${ticker}?token=${token}`;

async function fetchQuote() {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.error('Erro ao buscar cotação:', error);
  }
}

fetchQuote();
```

### Com TypeScript e Interface

```typescript
import axios, { AxiosError } from 'axios';

interface BrapiQuoteResponse {
  results: Array<{
    symbol: string;
    shortName: string;
    longName: string;
    currency: string;
    regularMarketPrice: number;
    regularMarketDayHigh: number;
    regularMarketDayLow: number;
    regularMarketVolume: number;
    regularMarketChange: number;
    regularMarketChangePercent: number;
    regularMarketTime: string;
    marketCap: number;
    fiftyTwoWeekLow: number;
    fiftyTwoWeekHigh: number;
  }>;
  requestedAt: string;
  took: string;
}

class BrapiClient {
  private baseUrl = 'https://brapi.dev/api';
  private token: string;

  constructor(token: string) {
    this.token = token;
  }

  async getQuote(ticker: string): Promise<BrapiQuoteResponse> {
    try {
      const response = await axios.get<BrapiQuoteResponse>(
        `${this.baseUrl}/quote/${ticker}`,
        {
          params: { token: this.token }
        }
      );
      return response.data;
    } catch (error) {
      if (axios.isAxiosError(error)) {
        const axiosError = error as AxiosError;
        throw new Error(
          `Erro na API: ${axiosError.response?.status} - ${axiosError.message}`
        );
      }
      throw error;
    }
  }

  async getMultipleQuotes(tickers: string[]): Promise<BrapiQuoteResponse> {
    const tickersParam = tickers.join(',');
    return this.getQuote(tickersParam);
  }
}

// Uso
const client = new BrapiClient(process.env.BRAPI_TOKEN!);

client.getQuote('PETR4').then(data => {
  const quote = data.results[0];
  console.log(`${quote.symbol}: R$ ${quote.regularMarketPrice}`);
  console.log(`Variação: ${quote.regularMarketChangePercent.toFixed(2)}%`);
});
```

## Exemplo Next.js (App Router)

### Server Component

```typescript
// app/stock/[ticker]/page.tsx
import { Suspense } from 'react';

interface QuoteData {
  results: Array<{
    symbol: string;
    shortName: string;
    regularMarketPrice: number;
    regularMarketChangePercent: number;
  }>;
}

async function getQuote(ticker: string): Promise<QuoteData> {
  const token = process.env.BRAPI_TOKEN;
  const res = await fetch(
    `https://brapi.dev/api/quote/${ticker}?token=${token}`,
    { next: { revalidate: 60 } } // Cache por 60 segundos
  );
  
  if (!res.ok) {
    throw new Error('Failed to fetch quote');
  }
  
  return res.json();
}

export default async function StockPage({
  params,
}: {
  params: { ticker: string };
}) {
  const data = await getQuote(params.ticker);
  const quote = data.results[0];
  
  return (
    <div>
      <h1>{quote.shortName}</h1>
      <p className="text-2xl font-bold">
        R$ {quote.regularMarketPrice.toFixed(2)}
      </p>
      <p className={quote.regularMarketChangePercent > 0 ? 'text-green-600' : 'text-red-600'}>
        {quote.regularMarketChangePercent.toFixed(2)}%
      </p>
    </div>
  );
}
```

### Client Component com SWR

```typescript
'use client';

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(r => r.json());

export function StockQuote({ ticker }: { ticker: string }) {
  const { data, error, isLoading } = useSWR(
    `/api/quote/${ticker}`,
    fetcher,
    { refreshInterval: 60000 } // Atualiza a cada 60 segundos
  );
  
  if (error) return <div>Erro ao carregar cotação</div>;
  if (isLoading) return <div>Carregando...</div>;
  
  const quote = data.results[0];
  
  return (
    <div>
      <h2>{quote.symbol}</h2>
      <p>R$ {quote.regularMarketPrice.toFixed(2)}</p>
    </div>
  );
}
```

### API Route

```typescript
// app/api/quote/[ticker]/route.ts
import { NextResponse } from 'next/server';

export async function GET(
  request: Request,
  { params }: { params: { ticker: string } }
) {
  const token = process.env.BRAPI_TOKEN;
  
  try {
    const response = await fetch(
      `https://brapi.dev/api/quote/${params.ticker}?token=${token}`
    );
    
    if (!response.ok) {
      return NextResponse.json(
        { error: 'Failed to fetch quote' },
        { status: response.status }
      );
    }
    
    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}
```

## Node.js com Cache

```typescript
import axios from 'axios';

class BrapiService {
  private cache = new Map<string, { data: any; timestamp: number }>();
  private cacheDuration = 60000; // 60 segundos
  
  constructor(private token: string) {}
  
  async getQuote(ticker: string) {
    const cached = this.cache.get(ticker);
    const now = Date.now();
    
    if (cached && now - cached.timestamp < this.cacheDuration) {
      return cached.data;
    }
    
    const response = await axios.get(
      `https://brapi.dev/api/quote/${ticker}?token=${this.token}`
    );
    
    this.cache.set(ticker, {
      data: response.data,
      timestamp: now
    });
    
    return response.data;
  }
}

// Uso
const service = new BrapiService(process.env.BRAPI_TOKEN!);
const data = await service.getQuote('PETR4');
```

## Boas Práticas

1. **Armazene o token em variáveis de ambiente**: Nunca exponha o token no código
2. **Implemente cache**: Evite requisições desnecessárias
3. **Trate erros adequadamente**: Sempre use try/catch ou .catch()
4. **Use tipos TypeScript**: Aproveite a tipagem para melhor DX
5. **Respeite os limites**: Monitore o uso de requisições

## Próximos Passos

* Veja exemplos em [outras linguagens](/docs/examples)
* Explore a [documentação completa da API](/docs)
* Confira os [endpoints disponíveis](/docs/acoes)