Interpretação do método fetch em h5 (resumo)

Como um novo objeto no H5, fetch nasceu para substituir a existência do ajax. Seu objetivo principal é apenas combinar com ServiceWorkers para obter as seguintes otimizações:

1. Otimize a experiência off-line
2. Mantenha-se escalável

Claro, se ServiceWorkers cooperar com o banco de dados IndexedDB do lado do navegador, parabéns, todo navegador pode se tornar um servidor proxy. (No entanto, não acho que isso seja uma coisa boa. Isso tornará o front-end cada vez mais pesado, seguindo o caminho antigo da arquitetura c/s anterior)

Por ser um novo método do h5, deve haver alguns navegadores mais antigos que não o suportam. Para aqueles que não suportam este método.

O navegador precisa adicionar um polyfill adicional:

[Link]: https://github.com/fis-components/whatwg-fetch

buscar(buscar):

HTML:

 fetch('/users.html') //O que é retornado aqui é um objeto Promise. Os navegadores que não o suportam precisam usar o ployfill ou transcodificação correspondente através do babel e outros transcodificadores antes de executar then(function(response) { return. resposta .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (ex) { console.log('falha na análise', ex)})

Metadados de resposta:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) console .log(response.status) console.log(response.statusText)})

Formulário de postagem:

 var form = document.querySelector('form')fetch('/users', { método: 'POST', corpo: new FormData(form)})

Postar JSON:

 fetch('/users', { método: 'POST', cabeçalhos: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //aqui O nome do corpo da solicitação da postagem é: 'Hubot', login: 'hubot', })})

Carregamento de arquivo:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Obtém o conteúdo do arquivo selecionado data.append( ' usuário', 'hubot')fetch('/avatares', { método: 'POST', corpo: dados})

(1) Diferenças do ajax:

1. O método patch não gerará um erro ao capturar dados, mesmo um erro 404 ou 500, a menos que seja um erro de rede ou o processo de solicitação seja interrompido. Mas é claro que há uma solução, aqui está a demonstração:

 function checkStatus(response) { if (response.status >= 200 && response.status < 300) { //Determina se o código de status da resposta é normal return response //Retorna o objeto de resposta original normalmente} else { var error = new Error (response .statusText) //Se for anormal, uma mensagem de status de erro de resposta será lançada error.response = response throw error }}function parseJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('solicitação bem-sucedida com resposta JSON', dados) }).catch( function(erro) { console.log('falha na solicitação', erro) })

2. Uma questão muito crítica é que o método fetch não envia cookies, o que é muito fatal quando é necessário manter uma conexão constante entre o cliente e o servidor, pois o servidor precisa identificar uma sessão através de cookies para manter a sessão estado. Se desejar, o envio de cookies requer a modificação das informações:

 fetch('/users', { credenciais: 'same-origin' //Enviar cookies no mesmo domínio})fetch('https://segmentfault.com', { credenciais: 'include' //Enviar cookies entre domínios} )

A figura abaixo é o resultado do acesso entre domínios ao segmento

No mínimo, o URL solicitado e o URL de resposta são iguais, mas se uma operação como redirecionamento for executada, o response.url pode ser diferente. No XHR, o response.url após o redirecionamento pode não ser preciso, precisa ser definido. : response.headers['X-Request-URL'] = request.url é adequado para (Firefox <32, Chrome <37, Safari ou IE.)

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.