Fetch API 教程

JavaScript 初学者学完语法，进入实际的网页编程，一定有人告诉你，要掌握一个叫做 XMLHttpRequest 的东西。

脚本都靠它发出 HTTP 请求，跟服务器通信。所谓的 AJAX 操作就是基于它实现的。要是没有它，就不会有单页应用。

这个 XMLHttpRequest 对象，不仅名字怪，用法也非常独特。

let xhr = new XMLHttpRequest;xhr.open('GET', url)xhr.onload = function  { if (this.status === 200) { let data = JSON.parse(this.responseText); console.log(data); }};xhr.onerror = function (err) { console.log('Error Occurred :', err);}xhr.send;

就是因为写起来麻烦，实际开发中，往往使用它的各种封装库，比如早期的 jQuery。

$.get("test.php", function (data) { $("body") .append("Name: " + data.name)  .append("Time: " + data.time);}, "json");

早期的封装库都使用回调函数，很不直观。后来的封装库都改用 Promise 的写法，比如 axios。

axios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); })

这样用起来，确实方便了，但是需要加载外部库，而它又是一个天天用到的基本需求。所以，浏览器厂商最终决定，抛弃 XMLHttpRequest，另起炉灶，重写一套全新的 API，内置在浏览器里面。

这就是 Fetch API，它使用fetch发出请求，返回的是 Promise 对象。

fetch('https://api.github.com/users/ruanyf') .then(response => response.json) .then(json => console.log(json)) .catch(err => console.log('Request Failed', err)); 

Promise 可以使用 await 语法，表达起来跟同步操作一模一样。

async function getJSON { let url = 'https://api.github.com/users/ruanyf'; try { let response = await fetch(url); return await response.json; } catch (error) { console.log('Request Failed', error); }}

Fetch API 的优点是写法简单，缺点是这个 API 包含的内容非常多，想要完全掌握并不容易。

我一直想写一篇教程，完整介绍它的各种用法，便于自己使用的时候查找。现在终于写出来，以后可以告别 XMLHttpRequest 了。

http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

（完）