接口请求进度条可以通过以下几种方式实现：
1、 XMLHttpRequest (XHR)：在使用原生的XMLHttpRequest对象发送请求时，可以通过监听progress事件来获取请求的进度信息。你可以使用XMLHttpRequest对象的onprogress事件处理程序来更新进度条的状态。通过获取已传输的数据量和总数据量，你可以计算出当前的进度百分比，并相应地更新进度条的显示。
2、 Fetch API：使用Fetch API发送请求时，可以通过使用fetch函数返回的Promise对象上的Response对象的body属性来获取请求的进度信息。你可以使用Response对象的body属性中的getReader()方法创建一个ReadableStream对象，并使用ReadableStream对象的read()方法来获取已传输的数据量和总数据量，从而计算出当前的进度百分比并更新进度条的显示。
3、 第三方库：除了原生的XMLHttpRequest和Fetch API，还有一些流行的第三方库，如Axios和jQuery，它们提供了更简单和易用的方式来处理接口请求和进度条。这些库通常会封装好请求和进度处理的逻辑，你只需要按照它们的文档和示例进行配置和使用即可。
不论你选择哪种方式，关键是要获取请求的进度信息，并根据这些信息更新进度条的状态。具体的实现方式可能会因使用的工具、框架或库而有所不同，你可以根据自己的项目需求选择适合的方法来实现接口请求进度条。
XMLHttpRequest (XHR)
当使用原生的XMLHttpRequest对象发送请求时，你可以按照以下示例代码来实现接口请求进度条：
// 创建XMLHttpRequest对象var xhr = new XMLHttpRequest();// 监听progress事件xhr.addEventListener('progress', function(event) {if (event.lengthComputable) {// 获取已传输的数据量和总数据量var loaded = event.loaded;var total = event.total;// 计算当前的进度百分比var progress = Math.round((loaded / total) * 100);// 更新进度条的显示// 这里假设你有一个id为"progress-bar"的进度条元素var progressBar = document.getElementById('progress-bar');progressBar.style.width = progress + '%';progressBar.textContent = progress + '%';}});// 发送请求xhr.open('GET', 'https://api.example.com/data');xhr.send();
在上面的代码中，我们创建了一个XMLHttpRequest对象，并通过addEventListener方法监听了progress事件。在事件处理程序中，我们通过event.loaded获取已传输的数据量，通过event.total获取总数据量，然后计算出当前的进度百分比。最后，我们更新进度条元素的宽度和文本内容，以反映当前的进度。
Fetch API
在Fetch API中，要获取请求的进度信息，你可以使用fetch函数返回的Response对象的body属性，通过创建一个可读的ReadableStream对象，并使用getReader方法来读取数据。然后，你可以监听ReadableStream对象的readable事件，并在事件处理程序中获取进度信息。
下面是一个使用Fetch API获取请求进度信息的示例代码：
// 发送请求fetch('https://api.example.com/data').then((response) => {if (response.ok) {// 创建可读的ReadableStream对象const reader = response.body.getReader();let receivedLength = 0;let chunks = [];// 监听readable事件reader.read().then(function processResult(result) {if (result.done) {// 请求完成后的处理const responseData = new Uint8Array(receivedLength);let position = 0;for (let chunk of chunks) {responseData.set(chunk, position);position += chunk.length;}console.log('请求完成');console.log(responseData);return;}// 处理读取的数据const chunk = result.value;chunks.push(chunk);receivedLength += chunk.length;// 在这里更新进度条的状态，例如更新进度条的宽度或百分比显示const percentComplete = (receivedLength / response.headers.get('content-length')) * 100;console.log(`请求进度：${percentComplete}%`);// 继续读取下一块数据return reader.read().then(processResult);});} else {// 请求失败的处理throw new Error('请求失败');}}).catch((error) => {// 请求发生错误的处理console.log(error);});
在这个示例中，我们使用fetch函数发送GET请求，并通过.then()方法处理响应。在响应处理函数中，我们首先检查响应是否成功。如果成功，我们通过response.body.getReader()方法获取一个可读的ReadableStream对象，并创建一些变量来追踪接收到的数据和进度信息。
然后，我们通过监听readable事件来读取数据。在事件处理程序中，我们首先检查result.done属性，如果为true，表示数据读取完成，我们可以进行请求完成后的处理。否则，我们处理读取的数据，并根据接收到的数据量和响应头中的content-length计算进度百分比，并更新进度条的状态。
最后，我们继续读取下一块数据，通过递归调用reader.read().then(processResult)来实现。这样，我们可以持续读取数据并更新进度信息，直到数据读取完成。
第三方库
要使用Axios库获取请求的进度信息，你可以利用Axios提供的onUploadProgress和onDownloadProgress配置选项。onUploadProgress用于获取上传进度信息，而onDownloadProgress用于获取下载进度信息。
下面是一个使用Axios获取请求进度信息的示例代码：
// 导入Axios库import axios from 'axios';// 发送请求axios.get('https://api.example.com/data', {// 配置选项onDownloadProgress: (progressEvent) => {const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;// 在这里更新进度条的状态，例如更新进度条的宽度或百分比显示console.log(`下载进度：${percentComplete}%`);}}).then((response) => {// 请求成功后的处理console.log(response.data);}).catch((error) => {// 请求发生错误的处理console.log(error);});
在这个示例中，我们使用Axios库的get方法发送GET请求，并通过配置选项对象传递onDownloadProgress回调函数。在onDownloadProgress回调函数中，我们可以获取进度事件对象progressEvent，并根据其loaded和total属性计算进度百分比，并更新进度条的状态。
你还可以使用onUploadProgress配置选项来获取上传进度信息。例如，如果你使用axios.post方法发送POST请求，你可以通过类似的方式使用onUploadProgress回调函数来获取上传进度信息。
PS. 文章来自网络，侵权删！
加我微信，拉你进前端进阶、面试交流群，互相监督学习进步等！
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：
点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）
关注我的博客 https://github.com/qappleh/Interview，让我们成为长期关系
关注公众号「深圳湾码农」，持续为你推送精选好文，回复「加群」加入面试互助交流群
点一下，代码无 Bug
