Axios

Objeto Axios

axios

$ npm install axios
$ npm install axios
/codes/package/axios/via-cep/index.js
import axios from 'axios';
 
const cep = '58015430';
 
const resource = `https://viacep.com.br/ws/${cep}/json/`;
 
axios.get(resource).then((response) => console.log(response.data));
/codes/package/axios/via-cep/index.js
import axios from 'axios';
 
const cep = '58015430';
 
const resource = `https://viacep.com.br/ws/${cep}/json/`;
 
axios.get(resource).then((response) => console.log(response.data));

Invest-app (CRUD)

Código Fonte

Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   ├── InvestmentCard.js
│   │   ├── InvestmentForm.js
│   │   └── Modal.js
│   ├── lib
│   │   ├── dom.js
│   │   ├── format.js
│   │   └── investments.js
│   ├── main.js
│   └── services
│       ├── api.js
│       └── storage.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js
Arquivos
invest-app
├── css
│   └── style.css
├── index.html
├── js
│   ├── components
│   │   ├── InvestmentCard.js
│   │   ├── InvestmentForm.js
│   │   └── Modal.js
│   ├── lib
│   │   ├── dom.js
│   │   ├── format.js
│   │   └── investments.js
│   ├── main.js
│   └── services
│       ├── api.js
│       └── storage.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── vite.svg
└── tailwind.config.js

Axios Config

/codes/package/axios/invest-app/js/services/api.js
import axios from 'axios';
 
const API_KEY = import.meta.env.VITE_APP_SUPABASE_KEY;
const API_URL = import.meta.env.VITE_APP_SUPABASE_URL + '/rest/v1';
 
export default axios.create({
  baseURL: API_URL,
  headers: {
    common: {
      apikey: API_KEY,
      Authorization: `Bearer ${API_KEY}`,
    },
    post: {
      Prefer: 'return=representation',
    },
    patch: {
      Prefer: 'return=representation',
    },
  },
});
/codes/package/axios/invest-app/js/services/api.js
import axios from 'axios';
 
const API_KEY = import.meta.env.VITE_APP_SUPABASE_KEY;
const API_URL = import.meta.env.VITE_APP_SUPABASE_URL + '/rest/v1';
 
export default axios.create({
  baseURL: API_URL,
  headers: {
    common: {
      apikey: API_KEY,
      Authorization: `Bearer ${API_KEY}`,
    },
    post: {
      Prefer: 'return=representation',
    },
    patch: {
      Prefer: 'return=representation',
    },
  },
});
/codes/package/axios/invest-app/js/services/storage.js
import API from '/services/api.js';
 
async function create(resource, data) {}
async function read(resource, id) {}
async function update(resource, id, data) {}
async function remove(resource, id) {}
 
export default { create, read, update, remove };
/codes/package/axios/invest-app/js/services/storage.js
import API from '/services/api.js';
 
async function create(resource, data) {}
async function read(resource, id) {}
async function update(resource, id, data) {}
async function remove(resource, id) {}
 
export default { create, read, update, remove };

Create a investment

Axios - POST Request

/codes/package/axios/invest-app/js/services/storage.js
async function create(resource, data) {
  const { data: createdData } = await API.post(resource, data);
 
  return createdData?.[0];
}
/codes/package/axios/invest-app/js/services/storage.js
async function create(resource, data) {
  const { data: createdData } = await API.post(resource, data);
 
  return createdData?.[0];
}
import Storage from './services/storage.js';
 
const investment = {
  name: "Tesouro Selic 2029",
  value: 10000,
  origin: "Tesouro Direto",
  category: "Pós",
  interest: "100% Selic",
  created_at: "2021-09-10T00:00:00-03:00",
};
 
Storage.create('investments', investment);
import Storage from './services/storage.js';
 
const investment = {
  name: "Tesouro Selic 2029",
  value: 10000,
  origin: "Tesouro Direto",
  category: "Pós",
  interest: "100% Selic",
  created_at: "2021-09-10T00:00:00-03:00",
};
 
Storage.create('investments', investment);

Read investments

Axios - GET Request

/codes/package/axios/invest-app/js/services/storage.js
async function read(resource, id) {
  if (id) {
    resource = `${resource}?id=eq.${id}`;
  }
 
  const { data } = await API.get(resource);
 
  return data;
}
/codes/package/axios/invest-app/js/services/storage.js
async function read(resource, id) {
  if (id) {
    resource = `${resource}?id=eq.${id}`;
  }
 
  const { data } = await API.get(resource);
 
  return data;
}
import Storage from './services/storage.js';
 
Storage.read('investments');
Storage.read('investments', 1);
import Storage from './services/storage.js';
 
Storage.read('investments');
Storage.read('investments', 1);

Update a investment

Axios - PATCH Request

/codes/package/axios/invest-app/js/services/storage.js
async function update(resource, id, data) {
  resource = `${resource}?id=eq.${id}`;
 
  const { data: updatedData } = await API.patch(resource, data);
 
  return updatedData?.[0];
}
/codes/package/axios/invest-app/js/services/storage.js
async function update(resource, id, data) {
  resource = `${resource}?id=eq.${id}`;
 
  const { data: updatedData } = await API.patch(resource, data);
 
  return updatedData?.[0];
}
import Storage from './services/storage.js';
 
Storage.update('investments', 1, { value: 15000 });
import Storage from './services/storage.js';
 
Storage.update('investments', 1, { value: 15000 });

Delete a investment

Axios - DELETE Resquest

/codes/package/axios/invest-app/js/services/storage.js
async function remove(resource, id) {
  resource = `${resource}?id=eq.${id}`;
 
  const { error } = await API.delete(resource);
 
  if (error) {
    throw error;
  } else {
    return true;
  }
}
/codes/package/axios/invest-app/js/services/storage.js
async function remove(resource, id) {
  resource = `${resource}?id=eq.${id}`;
 
  const { error } = await API.delete(resource);
 
  if (error) {
    throw error;
  } else {
    return true;
  }
}
import Storage from './services/storage.js';
 
Storage.remove('investments', 1);
import Storage from './services/storage.js';
 
Storage.remove('investments', 1);

Editar esta página