AJAX vs Fetch API：Promise 与异步 JavaScript 怎么用？

今天在学习promise的时候看到一些比较早的教程其中提到有一个重要的概念就是AJAX。尽管也许现代的做法更常见的是用Fetch API但是我也可以了解一下旧版实现里的做法也能够帮助理解早期的异步 API理解老项目的代码是如何做的。关于异步JSPromise的前置知识有关细节补充可阅读文档异步 JavaScript 简介我理解为promise的出现是异步编程中防止传统回调嵌套函数写法回调地狱。promise是现代 JavaScript 异步编程的基础。常常见到的await async等其实是一种语法糖使得写法简洁易读并且有关try catch 错误异常的捕获和管理会比较方便对比于原先采用catch统一管理错误的办法…。这样的写法看起来是同步代码的长相其实底层是异步编程。早期异步Web API: XMLHttpRequest(AJAX)AJAX全称为Asynchronous JavaScript and XML异步JavaScript和XML是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换使得网页可以实现异步更新。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。示例constlogdocument.querySelector(.event-log);document.querySelector(#xhr).addEventListener(click,(){log.textContent;constxhrnewXMLHttpRequest();xhr.addEventListener(loadend,(){log.textContent${log.textContent}完成状态码${xhr.status};});xhr.open(GET,https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json,);xhr.send();log.textContent${log.textContent}请求已发起\n;});document.querySelector(#reload).addEventListener(click,(){log.textContent;document.location.reload();});buttonidxhr点击发起请求/buttonbuttonidreload重载/buttonprereadonlyclassevent-log/pre点击“点击发起请求”按钮来发送一个请求。我们将创建一个新的XMLHttpRequest并监听它的loadend事件。loadend事件在请求完成时总会触发无论成功还是失败。如果需要区分成功和失败可以分别监听load成功和error失败事件。而我们的事件处理程序则会在控制台中输出一个“完成”的消息和请求的状态代码。AJAX的工作原理基于一系列现有的互联网标准主要包括以下几个方面XMLHttpRequest对象这是AJAX的核心它提供了在网页加载后从服务器请求数据的能力。JavaScript/DOM用于动态显示和交互的信息。CSS用于定义数据的样式。XML作为数据传输的格式尽管现在JSON格式更为常用。XMLHttpRequestXMLHttpRequest API使 web 应用能够通过 JavaScript 向 web 服务器发起 HTTP 请求并接收响应。这使得网站能够仅更新页面中的部分内容使用服务器返回的数据而无需跳转至全新页面。这种做法有时也被称为 AJAX。Fetch API 是取代 XMLHttpRequest API 的更灵活、更强大的方案。Fetch API 使用 promise 替代事件机制处理异步响应对 service worker 支持良好并支持 HTTP 的高级特性如跨源资源共享控制。基于这些优势现代 web 应用通常采用 Fetch API 替代XMLHttpRequest。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。XMLHttpRequestXHR对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据。这允许网页在不影响用户操作的情况下更新页面的局部内容。AJAX能允许网页在不影响用户操作的情况下与服务器进行数据交换和更新。例如Google地图、新浪微博等依托核心还是XMLHttpRequest。实现AJAX通常需要以下几个步骤创建XMLHttpRequest对象这是所有AJAX请求的起点。发送请求到服务器使用*open()和send()*方法可以指定请求的类型如GET或POSTURL以及是否异步。处理服务器响应通过监听onreadystatechange事件可以在请求的不同阶段执行不同的操作。当readyState属性变为4且status属性表示请求成功时可以处理响应数据。更新网页内容使用JavaScript操作DOM可以根据服务器的响应更新网页的特定部分。跨域问题和解决方法在使用AJAX时可能会遇到跨域问题即浏览器出于安全考虑限制了来自不同源的HTTP请求。解决跨域问题的方法包括CORSCross-Origin Resource Sharing通过服务器设置适当的HTTP响应头可以允许特定的外部域访问资源。JSONPJSON with Padding通过动态创建*AJAX的优势和注意事项AJAX的主要优势在于提高了用户体验通过异步更新可以减少等待时间使得Web应用程序更加快速和响应。然而也需要注意一些问题例如浏览器兼容性不同浏览器对AJAX的支持程度可能不同需要进行充分的测试。用户体验需要合理设计用户界面以便在数据加载过程中给予用户适当的反馈。网络延迟应考虑到网络延迟对用户体验的影响并采取相应的优化措施。总的来说AJAX技术使得Web开发进入了一个新的阶段它允许开发者创建出更加动态和交互性强的网页应用。使用Fetch API与Promise如何使用 PromiseMDN的教程已经讲解的非常好了我们一起来跟着学一学现代使用Fetch API 的做法。在基于 Promise 的 API 中异步函数会启动操作并返回一个Promise对象。首先Promise 有三种状态待定pending初始状态既没有被兑现也没有被拒绝。这是调用fetch()返回 Promise 时的状态此时请求还在进行中。已兑现fulfilled意味着操作成功完成。当 Promise 完成时它的then()处理函数被调用。已拒绝rejected意味着操作失败。当一个 Promise 失败时它的catch()处理函数被调用。注意这里的“成功”或“失败”的含义取决于所使用的 API例如fetch()认为服务器返回一个错误如 404 Not Found时请求成功但如果网络错误阻止请求被发送则认为请求失败。有时我们用已敲定settled这个词来同时表示已兑现fulfilled和已拒绝rejected两种情况。如果一个 Promise 已敲定或者如果它被“锁定”以跟随另一个 Promise 的状态那么它就是已解决resolved的。关于术语Let’s talk about how to talk about promises然后你可以将处理函数附加到 Promise 对象上当操作完成时成功或失败这些处理函数将被执行。constfetchPromisefetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);console.log(fetchPromise);fetchPromise.then((response){console.log(已收到响应${response.status});});console.log(已发送请求……);调用fetch()API并将返回值赋给fetchPromise变量。紧接着输出fetchPromise变量输出结果应该像这样Promise { state: pending }。这告诉我们有一个Promise对象它有一个state属性值是pending。pending状态意味着操作仍在进行中。将一个处理函数传递给 Promise 的then()方法。当如果获取操作成功时Promise 将调用我们的处理函数传入一个包含服务器的响应的Response对象。输出一条信息说明我们已经发送了这个请求。Promise{state:pending}已发送请求…… 已收到响应200与之前的 XMLHttpRequest 不同的是事件处理程序并不是添加在 XMLHttpRequest 的对象中我们这一次将处理程序传递到返回的promise对象的then方法里面。Promise链constfetchPromisefetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);fetchPromise.then((response){constjsonPromiseresponse.json();jsonPromise.then((json){console.log(json[0].name);});});等等还记得上一篇文章吗我们好像说过**在回调中调用另一个回调会出现多层嵌套的情况我们是不是还说过这种“回调地狱”使我们的代码难以理解**这不是也一样吗只不过变成了用then()调用而已当然如此。但 Promise 的优雅之处在于then()本身也会返回一个 Promise这个 Promise 将指示then()中调用的异步函数的完成状态。官方教程划重点Promise 的优雅之处在于then()本身也会返回一个 Promise这个 Promise 将指示then()中调用的异步函数的完成状态。所以以上代码等价于constfetchPromisefetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);fetchPromise.then((response)response.json()).then((data){console.log(data[0].name);});我们需要在尝试读取请求之前检查服务器是否接受并处理了该请求。我们将通过检查响应中的状态码来做到这一点如果状态码不是“OK”就抛出一个错误constfetchPromisefetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);fetchPromise.then((response){if(!response.ok){thrownewError(HTTP 请求错误${response.status});}returnresponse.json();}).then((json){console.log(json[0].name);});错误捕获constfetchPromisefetch(bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);fetchPromise.then((response){if(!response.ok){thrownewError(HTTP 请求错误${response.status});}returnresponse.json();}).then((json){console.log(json[0].name);}).catch((error){console.error(无法获取产品列表${error});});catch处理函数的输出错误。注意fetch()只有在网络层面失败时才会进入catch。服务器返回 404 或 500 状态码时Promise 依然是 fulfilled 状态需要通过response.ok手动判断。合并使用多个promise有时你需要所有的 Promise 都得到实现但它们并不相互依赖。在这种情况下将它们一起启动然后在它们全部被兑现后得到通知会更有效率。这里需要Promise.all()方法。它接收一个 Promise 数组并返回一个单一的 Promise。Promise.all()由Promise.all()返回的 Promise当且仅当数组中所有的 Promise 都被兑现时才会通知then()处理函数并提供一个包含所有响应的数组数组中响应的顺序与被传入all()的 Promise 的顺序相同。会被拒绝——如果数组中有任何一个Promise 被拒绝。此时catch()处理函数被调用并提供被拒绝的 Promise 所抛出的错误。constfetchPromise1fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);constfetchPromise2fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found,);constfetchPromise3fetch(https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json,);Promise.all([fetchPromise1,fetchPromise2,fetchPromise3]).then((responses){for(constresponseofresponses){console.log(${response.url}${response.status});}}).catch((error){console.error(获取失败${error});});promise.all用于批量处理不是相互依赖的promise这样提高了效率但是弊端是只有全部成功才会成功如果有一个失败rejected则所有all包含在内的promise都不能被兑现。此时错误会用catch抛出。Promise.any()有时你可能需要一组 Promise 中的某一个 Promise 的兑现而不关心是哪一个。在这种情况下你需要Promise.any()。这就像Promise.all()不过在 Promise 数组中的任何一个被兑现时它就会被兑现如果所有的 Promise 都被拒绝它也会被拒绝。在这种情况下我们无法预测哪个获取请求会先被兑现。constfetchPromise1fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);constfetchPromise2fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found,);constfetchPromise3fetch(https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json,);Promise.any([fetchPromise1,fetchPromise2,fetchPromise3]).then((response){console.log(${response.url}${response.status});}).catch((error){console.error(获取失败${error});});async 和 awaitasyncfunctionfetchProducts(){try{constresponseawaitfetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json,);if(!response.ok){thrownewError(HTTP 请求错误${response.status});}constdataawaitresponse.json();returndata;}catch(error){console.error(无法获取产品列表${error});}}constpromisefetchProducts();promise.then((data)console.log(data[0].name));这里我们调用await fetch()我们的调用者得到的并不是Promise而是一个完整的Response对象就好像fetch()是一个同步函数一样。我们甚至可以使用try...catch块来处理错误就像我们在写同步代码时一样。但请注意这个写法只在异步函数中起作用。异步函数总是返回一个 Promise。也就意味着async函数总是返回一个 Promise。即使你返回一个普通值它也会被自动包装成 Promise。小结与更多PromisePromise 是现代 JavaScript 异步编程的基础。它避免了深度嵌套回调使表达和理解异步操作序列变得更加容易并且它们还支持一种类似于同步编程中try...catch语句的错误处理方式。async和await关键字使得从一系列连续的异步函数调用中建立一个操作变得更加容易避免了创建显式 Promise 链并允许你像编写同步代码那样编写异步代码。Promise 在所有现代浏览器的最新版本中都可以使用唯一会出现支持问题的地方是 Opera Mini 和 IE11 及更早的版本。在这篇文章中我们没有涉及到所有的 Promise 功能只是介绍了最有趣和最有用的那一部分。随着你开始学习更多关于 Promise 的知识你会遇到更多有趣的特性。许多现代 Web API 是基于 Promise 的包括 WebRTC、Web Audio API、媒体捕捉与媒体流等等。