大家好，我是进阶学习者。1.前言有一系列异步任务要一个接一个地执行——例如，加载一个脚本。如何写出更好的代码？Promise提供了一些解决方案来做到这一点。二、案例分析1、运行过程如下。它的思想是通过.then处理程序（handler）链传递结果。//1。初始承诺在1秒后解析(*)，//2。然后.then处理程序（handler）被调用（**）。//3。它返回的值被传递给下一个.then处理程序（handler）（***）。这是有效的，因为对promise.then的调用返回一个承诺，因此可以在它之上调用下一个.then。当处理程序返回一个值时，它成为该承诺的结果，因此下一个.then将被调用。一个典型的新手错误：在技术上也可以添加多个.then到一个promise中。但这不是承诺链。示例：letpromise=newPromise(function(resolve,reject){setTimeout(()=>resolve(1),1000);});promise.then(function(result){alert(result);//1returnresult*2;});promise.then(function(result){alert(result);//1returnresult*2;});promise.then(function(result){alert(result);//1returnresult*2;});您在这里所做的只是一些承诺的处理程序。他们不互相传递结果；相反，它们彼此独立地运行处理任务。示例一：fetch在前端编程中，promise通常用于网络请求。案例：[etch方法将用于从远程服务器加载用户信息。它有很多可选参数。让承诺=获取（网址）；执行这条语句，向url发送网络请求并返回一个promise。当远程服务器返回标头时（在加载整个响应之前），将使用响应对象解析承诺。为了读取完整的响应，应该调用response.text()方法：当从远程服务器下载全文（fulltext）内容时，会返回一个promise，resolve以刚刚下载的文本为结果。以下代码向user.json发送请求并从服务器加载文本：fetch('/article/promise-chaining/user.json')//当远程服务器响应时，下面的.then开始执行.then(function(response){//当加载user.json时，response.text()会返回一个新的promise//这个promise会以加载的user.json作为结果returnreturnresponse();}).then(function(text){//...这是远程文件的内容alert(text);//{"name":"iliakan","isAdmin":true}});fetch返回的response对象还包括response.json()方法，该方法读取远程数据并将其解析为JSON。在我们的示例中，这更方便，所以让我们切换到这种方法。箭头函数也将用于简洁：//同上，但使用response.json()将远程内容解析为JSONfetch('/article/promise-chaining/user.json').then(response=>response.json()).then(user=>alert(user.name));//iliakan,gotusername现在，让我们对加载的用户信息做一些事情。例如，可以向GitHub再次请求加载用户资料并显示头像：//向user.json发送请求fetch('/article/promise-chaining/user.json')//LoaditasJSON.then(response=>response.json())//向GitHub发送请求.then(user=>fetch(`https://api.github.com/users/${user.name}`))//LoadresponseasJSON.then(response=>response.json())//显示头像图片（githubUser.avatar_url）3秒（也可以添加动画效果）.then(githubUser=>{letimg=document.createElement('img');img.src=githubUser.avatar_url;img.className="promise-avatar-example";document.body.append(img);setTimeout(()=>img.remove(),3000);//(*)});此代码有效，有关详细信息，请参阅评论。然而，这里有一个潜在的问题，一个典型的对于初学者有承诺的问题。看到(*)行：头像显示和移除后，我该如何做？例如，我想显示一个用于编辑用户或其他内容的表单。暂时还做不到。为了使链可扩展，我们需要返回一个承诺，该承诺会在头像完成显示时解析。像这样：fetch('/article/promise-chaining/user.json').then(response=>response.json()).then(user=>fetch(`https://api.github.com/users/${user.name}`)).then(response=>response.json()).then(githubUser=>newPromise(function(resolve,reject){//(*)letimg=document.createElement('img');img.src=githubUser.avatar_url;img.className="promise-avatar-example";document.body.append(img);setTimeout(()=>{img.remove();resolve(githubUser);//(**)},3000);}))//3秒后触发.then(githubUser=>alert(`Finishedshowing${githubUser.name}`));注意：也就是说，第一行(*)的.then处理程序(handler)现在返回一个新的Promise，该Promise只有在调用setTimeout中的resolve(githubUser)(**)后才会确定。链中的下一个.then将等到这一刻到来。作为一种好的做法，异步操作应该始终返回一个承诺。这使得以后计划后续行动成为可能。即使现在不打算延长链条，以后也可能需要。3.小结本文以JavaScript为基础，介绍Promise链的高级用法。主要介绍了新手在使用Promise时经常遇到的几个问题，并对这些问题进行了详细的解答。通过案例分析，可以更直观地展现出来。使用JavaScript语言可以帮助您更好地学习JavaScript。代码非常简单。希望能帮助你更好的学习。
