时间戳

首页 > 解决方案 > ajax 调用是否有任何 ES6 等效项？

javascript - ajax 调用是否有任何 ES6 等效项？

问题描述

在 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现在，如果我们使用箭头函数执行此操作，它将因为关键字而不起作用。

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

标签： javascriptajaxxmlhttprequest

解决方案

简而言之，XMLHttpRequest（甚至没有fetch）没有“ES6 等效项”，因为它们都不是 ECMAScript 功能，而是 WHATWG 和 W3C 定义的 Web 平台 API 的一部分。

但是，要以更“现代”的方式重写您的代码，使用一些 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();

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

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

推荐阅读