ajax 调用是否有任何 ES6 等价物？

Question

在 vanillaJS 中我们正在做类似的事情来 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();

现在，如果我们使用箭头函数执行此操作，它将无法工作，因为 this 关键字。

有没有办法解决这个问题并将其与箭头功能一起使用，还是我应该坚持使用旧方法？

Answer 1

简而言之，XMLHttpRequest（甚至 fetch）没有“ES6 等价物”，只是因为 none 是 ECMAScript 功能，但属于 Web 平台的一部分API 由 WHATWG 和 W3C 定义。

但是，要以更“现代”的方式重写您的代码，使用一些 ES6 功能，您可以按以下步骤进行：

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();

本质上我们使用的是addEventListener API（这仍然不是 ES 的特性，而是处理浏览器事件的最新规范）。然后我们使用 const 和箭头函数作为 ES6 特性的处理程序。

您不需要使用 this，因为您可以通过 event 对象或利用存储在 request 变量中的引用来访问您的请求。

ajax 调用是否有任何 ES6 等价物？

Is there any ES6 equivalent for ajax call?

javascript

ajax

xmlhttprequest