1.jQuery ajax
Ajax tradicional refere-se ao XMLHttpRequest(XHR), a tecnologia de requisição back-end mais antiga que apareceu no js original, e o núcleo usa o objeto XMLHttpRequest.
JQuery ajax é uma encapsulação do XHR nativo e adiciona suporte para JSONP. Depois de anos de atualizações e manutenções, é realmente muito conveniente, e as vantagens não precisam ser mencionadas; Se você insiste em listar algumas falhas, pode ser apenas:
1. É uma programação para MVC, que não segue a atual onda de MVVM front-end
2. Com base no desenvolvimento nativo do XHR, a arquitetura do próprio XHR não é clara.
3. Todo o projeto JQuery é grande demais, e é muito irrazoável introduzir todo o JQuery usando apenas ajax (adotando uma solução de embalagem personalizada e não aproveitando serviços de CDN)
4. Não está de acordo com o princípio da separação de preocupações
5. A configuração e a invocação são muito confusas, e o modelo assíncrono baseado em eventos não é amigável.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Como mostrado na figura a seguir:
2. axios
Após o Vue2.0, You Yuxi recomendou substituir o ajax do JQuery por axios, o que deve ter feito o axios entrar nos olhos de muitas pessoas.
Axios é um cliente HTTP baseado em Promises para navegadores e NODEJs, que é essencialmente uma encapsulação do XHR nativo, exceto que é uma implementação de Promises que está em conformidade com as especificações mais recentes do ES, e possui as seguintes características:
1. Crie um XMLHttpRequest pelo seu navegador
2. API de Suporte à Promessa
3. O suporte ao cliente impede o CSRF
4. Fornecer algumas interfaces para solicitações concorrentes (operação importante e muito mais conveniente)
5. Criar uma requisição HTTP a partir de node.js
6. Interceptar solicitações e respostas
7. Transformar dados de solicitação e resposta
8. Cancelamento do pedido
9. Converter automaticamente dados JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3.buscar
O Fetch é apresentado como uma alternativa ao AJAX, que apareceu no ES6 e usa o objeto promise no ES6. A busca é feita com base em promessas. A estrutura do código do Fetch é muito mais simples que a do ajax, e os parâmetros são um pouco como o jQuery ajax. No entanto, lembre-se deFetch não é uma encapsulação adicional do ajax, mas sim JS nativo e não usa o objeto XMLHttpRequest。
Vantagens do fetch:
1. Cumprir a separação de foco e não misturar entradas, saídas e estados acompanhados por eventos em um único objeto
2. Forma melhor e mais conveniente de escrever
Francamente, os motivos acima não me convencem nem um pouco, porque tanto o Jquery quanto o Axios nos ajudaram a encapsular xhr bem o suficiente e são fáceis de usar, por que ainda precisamos investir tanto esforço para aprender a buscar objetos?
Acho que as principais vantagens do fetch são:
1. A sintaxe é concisa e mais semântica
2. Com base na implementação padrão de promessa, suporte async/await
3. Conveniência isomorfa, usando [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Mais de nível básico, fornecendo APIs ricas (requisição, resposta)
5. Separar-se do XHR é uma nova implementação na especificação ES
Fetch é uma API de baixo nível que você pode considerar como um XHR nativo, então não é tão confortável de usar e precisa ser encapsulada.
Por exemplo:
1) fetch reporta apenas erros para solicitações de rede, e trata 400 e 500 como requisições bem-sucedidas, e o servidor não rejeita ao retornar códigos de erro 400 ou 500.
2) fetch não carrega cookies por padrão, você precisa adicionar um item de configuração: fetch(url, {credentials: 'include'})
3) fetch não suporta abort, não suporta controle de timeout, e o controle de timeout implementado por setTimeout e Promise.reject não pode impedir que o processo de solicitação continue rodando em segundo plano, resultando em tráfego desperdiçado
4) o fetch não tem como monitorar nativamente o progresso das requisições, enquanto o XHR pode
|
Publicado em 16/05/2019 13:28:28
|
|
|
|
Publicado em 17/05/2019 18:16:39
|
Senhorio