Prefácio
No desenvolvimento front-end, a solicitação de dados é um problema frequentemente encontrado. Este artigo apresentará 10 métodos comuns de solicitação de dados no front-end e fornecerá exemplos de código e cenários de uso para cada método para ajudar os desenvolvedores a fazer melhores escolhas e usos.
1. Buscar API
Fetch API é uma interface global integrada ao navegador para solicitações de rede. Você pode usá-la para enviar solicitações HTTP e obter dados de resposta.
fetch('https://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
A API Fetch é simples de usar e oferece suporte a vários métodos de solicitação, como GET e POST. A desvantagem é que a compatibilidade requer suporte para Polyfill. Adequado para solicitações simples.
2. Solicitação XMLHttp
O objeto XMLHttpRequest (XHR) é usado para comunicação assíncrona com o servidor em segundo plano. Ele pode trocar dados com o servidor sem recarregar a página inteira.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/users');
xhr.onload = function() {
// ...
};
xhr.send();
XHR oferece suporte a vários métodos de solicitação e eventos de progresso. Boa compatibilidade, mas API um pouco complicada. Ideal para solicitações complexas que exigem mais controle.
3. jQuery AJAX
jQuery fornece um método $.ajax() simples e fácil de usar para enviar solicitações AJAX.
$.ajax({
url: '/song/id',
data: {
format: 'json'
}
})
.done(function( response ) {
// ...
});
O encapsulamento jQuery é simples, mas depende da biblioteca jQuery. Adequado para solicitações GET/POST simples.
4. Eixos
Axios é um cliente HTTP baseado em Promise para navegador e Node.js. Comparada com jQuery, a API do Axios é mais simples e tem suporte mais amplo.
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Axios oferece suporte à interceptação de solicitações e respostas e fornece recursos avançados, como recursos de solicitação simultânea. Adequado para desenvolvimento AJAX mais complexo.
5. Recurso Vue
Vue Resource é um plugin Vue.js para trabalhar com recursos como JSON. Ele encapsula a implementação XMLHttpRequest e fornece uma interface conveniente.
this.$http.get('/someUrl')
.then(response => {
// success callback
})
.catch(error => {
// error callback
})
Aplicável apenas a projetos Vue. Simples de usar, suporta interceptação de solicitações e respostas.
6. Axios Vue
Vue Axios é um plug-in Vue.js baseado em Axios, que fornece ao Vue.js um método de instância $axios para solicitações de rede.
this.$axios.get('/user?ID=12345')
.then(response => {
// success callback
})
.catch(error => {
// error callback
})
Semelhante ao Vue Resource, mas baseado na implementação mais madura do Axios. Aplicável a solicitações de rede para projetos Vue.
7. Reagir busca
React-Fetch é um pacote Fetch leve especialmente projetado para React. Ele fornece um componente Fetch para envio de solicitações.
<Fetch url="/users">
{({ loading, error, data }) => {
if (loading) return <div>Loading...</div>
if (error) return <div>Error!</div>
return <pre>{JSON.stringify(data)}</pre>
}}
</Fetch>
Busca simples de dados para projetos React.
8. Reagir Axios
React Axios é uma biblioteca de aquisição de dados React baseada em Axios. Ele fornece um componente Axios para envio de solicitações.
<Axios
method="GET"
url="/users"
onSuccess={data => console.log(data)}
onError={error => console.log(error)}
/>
Semelhante ao React Fetch, mas oferece suporte aos recursos mais avançados do Axios. Adequado para cenários onde o Axios precisa ser usado no React.
9. Trabalhador de serviço
O Service Worker pode armazenar recursos em cache e obter recursos de acesso offline. Os dados comumente usados podem ser pré-armazenados em cache por meio do Service Worker para obter acesso rápido.
// Install Service Worker
self.addEventListener('install', event => {
// Cache resources
});
// Activate Service Worker
self.addEventListener('activate', event => {
// Remove unused caches
});
Adequado para cenários que requerem acesso offline ou carregamento rápido.
10. WebSocket
WebSocket fornece um canal de comunicação full-duplex, permitindo comunicação bidirecional em tempo real entre o servidor e o cliente.
const socket = new WebSocket('ws://localhost:3000');
socket.onopen = () => {
socket.send('hello');
};
socket.onmessage = evt => {
console.log(evt.data);
};
Adequado para cenários que exigem comunicação em tempo real, como salas de chat.
A descrição acima apresenta 10 métodos comuns de solicitação de dados no front-end e os cenários de uso correspondentes. Os desenvolvedores podem escolhê-los e combiná-los com flexibilidade de acordo com suas próprias necessidades em projetos reais.