JavaScript 异步获取文件

在 Web 开发中，异步获取文件是一个常见的需求。通过异步获取文件，可以避免页面阻塞，提高用户体验。本文将介绍如何使用 JavaScript 异步获取文件。

XMLHttpRequest

XMLHttpRequest 是现代浏览器中异步获取文件的主要方式。它是由微软最早实现的，现在已经成为标准。使用 XMLHttpRequest 可以获取各种文件，包括文本、JSON、XML、图片等。下面是一个使用 XMLHttpRequest 异步获取文本文件的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const text = xhr.responseText;
    console.log(text);
  }
};
xhr.send();

上面代码中，首先创建了一个 XMLHttpRequest 实例，并指定请求方法和文件地址。然后设置 onreadystatechange 事件处理函数，当请求状态改变时会调用此函数。当请求完成且响应状态为 200 时，读取响应文本，并在控制台中打印出来。

fetch

fetch 是 ES6 中新增的异步获取文件的方法，也是一种比较常用的方式。它使用 Promise 来封装异步请求，使用起来非常简单。下面是一个使用 fetch 异步获取 JSON 文件的示例：

fetch('example.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上面代码中，使用 fetch 方法异步获取 example.json 文件。然后，在 Promise 的 then 方法中，调用 json 方法将响应体转换为 JSON 对象，并打印出来。如果请求失败，会调用 catch 方法打印出错误信息。

Axios

Axios 是一个基于 Promise 的 HTTP 客户端库，封装了 XMLHttpRequest 和 fetch，提供了更简单、更强大的 API。使用 Axios 可以更方便地设置请求头和请求体、拦截请求和响应等。下面是一个使用 Axios 异步获取图片的示例：

axios({
  method: 'get',
  url: 'example.png',
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}).catch(error => console.error(error));

上面代码中，使用 Axios 向 example.png 发送 GET 请求，并指定响应类型为 blob。然后，在 Promise 的 then 方法中，使用 window.URL.createObjectURL 方法将响应体转换为 URL，创建一个 img 元素并将其添加到页面中。如果请求失败，会在 catch 方法中打印出错误信息。

以上是 JavaScript 异步获取文件的常用方法，根据实际需求选择适合自己的方法即可。