ES6中有没有Ajax调用的等效实现？箭头函数适配XMLHttpRequest有解决方案吗

ES6 标准下的等效 Ajax 实现 #

ES6 标准新增了原生的Fetch API作为网络请求方案，可以完全替代传统 XHR 实现，默认基于 Promise 封装，适配后续的 async/await 语法，写法更简洁清晰：

// 基础 Fetch 写法
fetch('file.json')
  .then(response => {
    if (!response.ok) throw new Error('请求出错');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.log(err.message));

搭配 ES2017 引入的 async/await（属于 ES6+ 生态的常用标准特性），逻辑可读性更高：

async function fetchData() {
  try {
    const response = await fetch('file.json');
    if (!response.ok) throw new Error('请求出错');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.log(err.message);
  }
}
fetchData();

XHR 适配箭头函数的解决方案 #

传统 XHR 回调里的this默认指向 XHR 实例本身，而箭头函数的this会继承外层作用域的指向，所以只要放弃用this访问实例，直接引用外部声明的 XHR 变量即可解决问题：

const request = new XMLHttpRequest();
request.open('GET', 'file.json', true);
request.onload = () => {
  // 直接用外部的 request 变量代替 this 访问实例属性
  if(request.status >= 200 && request.status < 400) {
    const data = JSON.parse(request.response);
    console.log(data);
  } else {
    console.log("Error !");
  }
}
request.send();

写法建议 #

• 新写的业务代码更推荐用Fetch API，和现代前端的异步编程范式适配性更好，不需要额外处理this指向问题，代码维护成本更低
• 如果是维护旧项目的存量 XHR 逻辑，不需要强行修改为箭头函数，原有传统匿名函数写法完全可用；如果确实要统一箭头函数规范，按上面的方案直接引用 XHR 实例变量即可，不需要额外做其他适配。

内容的提问来源于stack exchange，提问作者IhateReact