en vanillaJS estamos haciendo algo así para llamar ajax:
var request = new XMLHttpRequest(); request.open('GET','file.json',true); request.onload = function (){ if(this.status >= 200 && this.status<400){ var data = JSON.parse(this.response); console.log(data); } else{console.log("Error !"); } request.send(); Ahora, si hacemos esto con funciones de flecha, no funcionará debido a this palabra clave.
¿Hay alguna forma de resolver este problema y usarlo con la función de flecha o debería seguir con la forma antigua?
En resumen, no hay un "equivalente de ES6" para XMLHttpRequest (ni siquiera fetch ) simplemente porque ninguno de ellos es una característica de ECMAScript sino parte de la API de la plataforma web definida por WHATWG y W3C.
Sin embargo, para reescribir su código de una manera más "moderna", utilizando algunas funciones de ES6, puede proceder de la siguiente manera:
const request = new XMLHttpRequest(); request.addEventListener('load', (e) => { // YOU COULD ALSO ACCESS request AS e.target HERE. if (request.status >= 200 && request.status < 400) { const data = JSON.parse(request.response); console.log(data); } else { console.log('ERROR'); } }); request.open('GET', 'file.json'); request.send(); Esencialmente, estamos usando la API addEventListener (que todavía no es una característica de ES, sino la especificación más reciente para manejar eventos en los navegadores). Luego estamos usando const y una función de flecha como controlador, que son características de ES6.
No necesita usar this , ya que puede acceder a su solicitud a través del objeto de event o aprovechando la referencia almacenada en la variable de request .