https://github.com/mrbrunelli/consulta-fetch
Realizar consultas GET e POST ao backend com fetch
https://github.com/mrbrunelli/consulta-fetch
fetch fetch-api get javascript php post tutorial
Last synced: 2 months ago
JSON representation
Realizar consultas GET e POST ao backend com fetch
- Host: GitHub
- URL: https://github.com/mrbrunelli/consulta-fetch
- Owner: mrbrunelli
- Created: 2020-03-07T15:03:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-08T20:09:08.000Z (over 6 years ago)
- Last Synced: 2025-03-05T08:17:57.672Z (over 1 year ago)
- Topics: fetch, fetch-api, get, javascript, php, post, tutorial
- Language: PHP
- Homepage:
- Size: 17.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Realizar consultas ao backend utilizando o fetch
Hoje não há mais necessidade de se usar o ajax do jquery, é possível fazer o mesmo trabalho usando o fetch, que é nativo do javascript. E podemos contar com as vantagens das promises.
## Exemplo de uso com o método GET
Ao utilizar o método **GET** eu preciso passar os dados por url.
```javascript
fetch(`consulta.php?acao=${dados}`) // Passar conteúdo por url
.then(res => res.text())
.then(res => console.log(res))
catch(error => console.error(error))
```
## Exemplo de uso com o método POST
Ao utilizar o método **POST** eu preciso de um pouco mais de código.
```javascript
let dados = 'conteudo=' + conteudo // Concatenar a chave com o valor
fetch('consulta.php', {
method: 'POST',
body: dados,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(res => res.text())
.then(res => console.log(res))
.catch(error => console.error(error))
```
## Agora eu preciso receber esses valores no meu backend
Estou utilizando o **PHP** para receber e tratar esses conteúdos enviados.
```php
resultado.text()) // Converter para texto. Caso fosse um JSON, usariamos resultado.json()
.then(dados => console.log(dados)) // Aqui ele recupera o resultado de cima, agora eu posso usar esses dados da maneira que eu quiser.
.catch(erro => console.error(erro)) // Caso dê erro na requisição, ele cairá aqui, e você saberá, legal né?
```
## Espero que eu tenha te ajudado!
Fique de olho aqui no meu perfil, sempre irei postar alguns tutoriais com a tag **#tutorial**. Até a próxima!