从AJAX到Fetch

探讨对象

---

AJAX

AJAX是一种异步的web与服务端交互技术，AJAX使用户不用刷新整个页面即可得到服务端的反馈。可以说，AJAX的出现，大大的改变了JavaScript在互联网中的地位。

Fetch

尽管AJAX已经流行至今了很长一段时间，但是随着计算机的发展，难免出现一些瑕疵。由于原生xhr对象的简陋和繁琐，使得jQuery之后推出了更加友好的jQuery ajax() API，但是当软件变得复杂时，由于其异步性，就有可能出现令人头痛的“回调地狱现象”。在这种局面下，Fetch也就诞生了。

Fetch是基于ES6 Promise对象和原生AJAX高度封装的一个新接口，它实际上属于语法糖，解决了ajax中可能出现的“回调地狱”现象 。Promise的出现，将原本横向的回调代码变成了纵向，这无疑变得更加友好。

---

传统xhr发送数据

var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'json';
    xhr.onload = function () {
      console.log(xhr.response);
    };
    xhr.onerror = function () {
      console.log('error');
    };
xhr.send()

Fetch写法

// Fetch写法
fetch(url)
.then(function (response) {
  return response.json();
}).then(function (data) {
  console.log(data);
}).catch(function (e) {
  console.log('error');
})

// Es6箭头函数写法
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log('error'))

// 使用async/await最终优化
try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
} catch (e) {
  console.log(e);
}

可以明显看出，在使用async/await进行最终优化之后，编码风格几乎和平时写的同步性的JavaScript一致。

---

用法

fetch(url, options).then(function(response) {
  // 处理 HTTP 相应
}, function(error) {
  // 处理错误
})

详细参数说明篇幅过长，大家可以参考MDN给出的使用文档 MDN Using Fetch

---

使用案例

GET

  // 发送get请求
  let str = `?user=abc&pwd=123`
  fetch('http://localhost:3000'+str, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })

POST

// 发送post请求
fetch('http://localhost:3000', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    user: "abc",
    pwd: "123"
  })
})
.then(res => res.json())
.then(data => {
  console.log(data);
})

也可以使用async/await来做进一步优化，这里就不演示了。

---

Fetch的优点

1. 语法简洁，更加语义化
2. 基于标准Promise实现，支持async/await

需要注意，原生支持率不高，不过可以引入polyfill来完美支持IE8+

Fetch是计算机发展的产物，也是最新的技术，尽管现阶段AJAX依然流行，但是随着时代慢慢发展，Fetch也必然会逐渐替代AJAX的地位。