Como fazer uma solicitação HTTP em JavaScript

'XmlHttPrequest' e 'buscar()' são duas funções poderosas no JavaScript que podem ser usadas para fazer chamadas de Ajax. XmlHttPrequest (XHR) é uma tecnologia herdada que existe desde os primeiros dias da web. Ele permite que você faça solicitações HTTP do lado do cliente e ainda é amplamente usado hoje. A função Fetch (), enquanto isso, é uma adição mais recente ao JavaScript que está lentamente assumindo o controle como a maneira preferida de fazer chamadas de Ajax. Ele usa promessas, por isso é mais fácil de escrever e depurar, e também suporta streaming e outros recursos modernos.

Tanto o XMLHTTPREQUEST quanto o Fetch () são ótimas ferramentas para fazer chamadas de Ajax, mas o busca () geralmente é considerado a melhor opção para a maioria dos aplicativos. Então, se você está procurando uma maneira de fazer chamadas de Ajax em JavaScript, experimente o Fetch (). Achamos que você ficará agradavelmente surpreendido com os resultados!

Faça solicitação HTTP em JavaScript

Aqui está um exemplo de usar XmlHttPrequest fazer um PEGAR Solicitação para recuperar dados da API remota:

const xhr = novo xmlHttPrequest (); xhr.ResponseType = 'JSON'; xhr.ONREADESTATECHANGE = () => if (xhr.ReadyState === XmlHttPrequest.Feito) console.log (xhr.resposta); xhr.aberto ('get', 'https: // api.exemplo.com/'); xhr.setRequestHeader ('Autorização', 'Porter' + api_key); xhr.enviar();

123456789101112

const xhr = novo xmlHttPrequest (); xhr.ResponseType = 'JSON'; xhr.ONREADESTATECHANGE = () => if (xhr.ReadyState === XmlHttPrequest.Feito) console.log (xhr.resposta); xhr.aberto ('get', 'https: // api.exemplo.com/'); xhr.SetRequestHeader ('Autorização', 'Portador' + API_KEY); XHR.enviar();

Aqui está um exemplo de usar buscar() fazer um PEGAR Solicitar para recuperar dados de uma API remota.

Fetch ('https: // API.exemplo.com/', cabeçalhos: ' autorização ':' portador ' + api_key) .então (resposta => resposta.JSON ()) .então (dados => console.log (dados));

1234567

Fetch ('https: // API.exemplo.com/', cabeçalhos: ' autorização ':' portador ' + api_key) .então (resposta => resposta.JSON ()) .então (dados => console.log (dados));

Ambos os exemplos assumem que você tem uma chave de API armazenada em uma variável chamada api_key.

Você também pode usar buscar() Para fazer outros tipos de solicitações HTTP, como PUBLICAR, COLOCAR, e EXCLUIR, Passando um objeto de opções como o segundo argumento. Por exemplo:

Fetch ('/url', método: 'post', corpo: json.stringify (name: 'John', idade: 30,), cabeçalhos: 'content-type': 'Application/json',,);

12345678910

Fetch ('/url', método: 'post', corpo: json.stringify (name: 'John', idade: 30,), cabeçalhos: 'content-type': 'Application/json',,);

Observe que 'XmlHttPrequest' e 'buscar()' são assíncronos, o que significa que o código não bloqueará enquanto a solicitação estiver sendo feita. Em vez disso, a resposta será processada em uma função de retorno de chamada ou com uma promessa.