promise promise简介:Promise是ES6加入标准的异步编程方案，通常用来表示一个异步操作的最终完成(或失败)。 Promise标准的提出已经处理了JavaScript hell回调的问题。 语法var p = new promise(function(resolve，reject) {...}/*执行者*/)；p . then(()= & gt；{ })//成功resolve . catch(()= >；{});//失败拒绝构造函数promise构造函数executor函数，两个函数resolve和reject作为参数传递给executor(在Promise构造函数返回创建的Promise实例对象之前调用executor函数) 调用resolve和reject函数时，分别将承诺的状态更改为completed或rejected。 通常，少量异步操作在执行器内部执行。一旦异步操作完成(可能成功/失败)，要么调用resolve函数将承诺状态更改为已履行，要么调用reject函数将承诺状态更改为已拒绝。 如果executor函数中出现错误，承诺状态将被拒绝。 executor函数的返回值将被忽略。 承诺对象创建后，不一定马上就有价值，只是一个代理的结果。它有三种状态:pending:初始状态(等待状态)，既不成功也不失败。 已完成:表示操作成功完成。 拒绝:表示操作未能完成。 方法Promise.all(iterable)该方法返回一个新的Promise对象。 通常，该方法将接受一个iterable参数，该参数包含一个承诺列表。当所有承诺都被成功触发时，就会触发成功。一旦其中一项失败，其他承诺的执行将立即中止。 当iterable中的所有结果都被成功执行后，这个新的promise对象将以数组的形式依次返回所有结果。 当出现失败时，这个新的promise对象将返回失败信息。 Promise.race(iterable)当iterable参数中的任何一个子承诺成功或失败时，父承诺将立即调用与子承诺成功返回值或失败引入作为参数的父承诺绑定的对应句柄，并返回承诺对象。 Promise.reject(rease)返回一个带有失败状态的Promise对象，并将给定的失败信息传递给相应的解决方案。Promise.resolve(value)返回一个Promise对象，其状态由给定值决定。 如果值是thenable(即带有then方法的对象)，则返回的Promise对象的最终状态由then方法的执行决定；否则(值为空、基本类型或没有then方法的对象)，返回的Promise对象状态为已履行，并且值被传递给相应的then方法。 一般来说，如果不知道一个值是否可以作为承诺对象，就使用Promise.resolve(value)返回一个承诺对象，这样该值就可以作为承诺对象。 例子的枯燥讲解终于结束了。下面用一个具体的例子来展示各种状态和方法://Create promises 1。构造函数有两个参数，resolve，reject const P1 = new promise((resolve，reject)= >；{console.log('我从头开始执行！')setTimeout(()= & gt；{ resolve('timeout 1') }，1000)}//Promise 2 const p2 = new Promise((resolve，reject)= & gt；{ setTimeout(()= & gt；{resolve ('timeout 2')}，2000)}) console.log (P1，P2，' P1，P2州')// Promise.race方法，然后Promise.race方法([P1，P2])。然后(RES = >；{console.log(res，' race result') })// Promise.all方法promise.all ([p1，p2])。然后(RES = >；{console.log(res，' all result') console.log('此时:'，p1，p2，' p1，p2 state') })// Promise.reject方法测试Promise.reject ('failure ')。catch(err = >；console . log(' promise . reject:'+err))//promise . resolve方法测试promise.resolve (1)。然后(r = >；console . log(promise . resolve的结果1:+r))promise . resolve(P1)。然后(r = >；console . log(' Promise . resolve:2的结果2:'+r))1.png以上代码和执行结果简单说明了promise方法的创建、存在状态和使用方法。 Promise的用法详述如下。 本文开头作者提出了promise可以处理前台臭名昭著的hellcallback问题，那么什么是hellcallback呢？下面用一个简单的场景和实现方法来说明:场景的前台是下面这个场景，我们需要实现修改一个客户的头像的功能。 首先，我们需要压缩一张图片，提交到后台。后台返回图片保存的网址，前台取保存的网址和客户id提交给服务器修改客户头像。 异步1:异步加载图片2:异步压缩图片3:异步上传图片4:提交保存大概代码实现://读取头像，异步进程，成功后执行回调函数函数README(callback){ const IMG = new image()；img.onload = function () {回调& amp& ampCallback(img) }}//压缩一张图片，压缩过程是异步的。成功后执行回调函数Function Compression (img，callback) {zipimg (img，callback)}//最后一个客户头像，异步请求函数uploadImg(img，callback) { $。ajax({ url: '/upload '，数据:img，成功:函数(URL){ callback & amp；& amp回调(URL)} }//保存最终数据，客户头像，异步请求函数保存数据(URL，回调){$。Ajax ({URL:'/save '，data: {ID，URL}，success:function(RES){ callback & amp；callback(RES)} } }//保存函数Function submit(){ Readimg(Function(img){ Compression(img，function (img) {Uploadimg (img，function (url) { saveData(url，Function(RES){ console . log(RES)} } }以上场景在我们的开发过程中非常常见。由于js的异步性，异步执行结果只能在回调函数中获得，于是就有了最后的回调地狱。 这个过程极难排查，而且层层嵌套，代码极难维护，不美观。 利用promise chaining的特性，我们可以把上面的代码改成下面的形式:function submit () {readimg()。然后(img = >；{返回压缩(img) })。然后(img = & gt{ return uploadImg(img) })。然后(url = & gt{ return saveData(url) })。然后(res = & gt{ console.log(res) })。catch(err = & gt；{console.log (err)}}可以看到代码结构不仅变得平铺了，异常解决也变得简单了。只要你想在最后捕捉一个异常，就可以捕捉整个过程的异常。 使用promise创建变量:const my first promise = new promise((resolve，reject)= >；{ // ?做几个异步操作，最终调用下面两个中的一个://resolve(some value)；//履行//？或者//拒绝(“失败原因”)；//拒绝})；my first promise . then(RES = & gt；{//成功dosomething})。catch(err = >；{//failed doSomething})函数:const my first promise = function(){ return new promise((resolve，reject)= >；{//异步进程// resolve()成功完成// reject()失败拒绝})} myfirstpromise()。然后(RES = >；{//成功dosomething})。catch(err = >；{//failure doSomething})当使用场景为异步时，给出异步结果:const my first promise = function(){ return new promise((resolve，reject)= >；{ setTimeout(()= & gt；{ resolve() }，1000)} } my first promise . then(()= & gt；{console.log('一秒钟后！'}})当多个异步都需要结果向下执行时，使用promise.all: promise.all ([func1()、func2()、func3 ()])。然后(([结果1，结果2，结果3])= >；{ /*使用结果1、结果2和结果3 */})；按顺序执行一组异步，得到最终结果。用Promise.resolve和reduce函数的组合来实现:var funca = function(a){ return new promise((resolve，reject)= >；{ setTimeout(()= & gt；{ console.log(a，' result funca ')；resolve(a + 1) }，1000)} } var funcb = function(result){ return new Promise((resolve，reject)= & gt；{ setTimeout(()= & gt；{ console.log(result，' result funcb ')resolve(2+result)}，1000)} } var funcc = function(result){ return new Promise((resolve，reject)= & gt；{ setTimeout(()= & gt；{ console.log(result，' result funcc ')resolve(3+result)}，1000)} } var funcd = function(d){ console . log(d，' result funcd ')return d+4 } const applyAsync =(ACC，val)= & gt；ACC . then(val)；const composeAsync =(...DD)= & gt；x = & gtdd.reduce(applyAsync，promise . resolve(x))；const transform data = compose async(funca，funcb，funcc，funcd)；transformData(1)。然后(result = & gtconsole.log(result，'最后结果'))。catch(e = & gt；控制台. log(e))；结果执行了上述三个异步函数和一个同步函数。我们利用Promise.resolve的特性依次执行三个异步函数，最终在then中得到最终的执行结果。 此外，上述函数是可重用的，并且可以顺序地执行任意数量的异步函数和同步函数。 常见错误写作在编写Promise链时，需要注意下面例子中显示的几个错误://Error example，其中包含3个问题！做某事()。then(function(result){ do something other(result)//不返回任何承诺且没有必要的嵌套承诺. then(new result = >；doThirdThing(new result))；}).然后(()= & gtdoFourthThing())；//最后，没有使用catch来终止Promise调用链，这可能会导致无法捕获的异常。第一个错误是事物连接不正确。 当我们创造了一个新的承诺，却不记得兑现时，就会发生这种情况。 因此，这个链被打破了，或者更准确地说，我们有两个独立的链在竞争(两个异步执行同时执行，而不是一个)。 这意味着doFourthThing()不会等待doSomethingElse()或doThirdThing()完成，而是与它们并行运行，这可能是无意的。 单独的链也有单独的错误解决方案，从而导致无法捕获的错误。 第二个错误是实现第一个错误不必要的嵌套。 嵌套还限制了内部错误解析器的范围，如果出现意外，可能会导致无法捕获的错误。 一种变体是Promise构造函数反模式，它结合了Promise构造函数的冗余使用和嵌套。 第三个错误是我不记得用catch终止链。 这导致了承诺链中的拒绝，在大多数浏览器中无法终止。 一个好的经验法则是总是返回或终止承诺链，一旦你得到一个新的承诺，就返回它。 下面是修改后的扁平化代码:做点什么()。然后(函数(结果){return做点别的(结果)；}).然后(newResult = & gtdoThirdThing(newResult))。然后(()= & gtdoFourthThing())。catch(错误= & gtconsole.log(错误))；兼容性大多数浏览器已经支持promise。有巴别尔的祝福，我们不需要担心。 Summary Promise是ES6加入了标准的异步编程方案，通常用来表示异步操作的最终完成(或失败)。 承诺链调用的特点处理js地狱回调的问题。 Promise提供了一系列的属性和方法。 仅仅使用Promise.all和Promise.resolve就可以处理很多问题。 上期我们将结合本期的讲解，结合几个经典的诺言面试问题，对诺言有更深入的理解。 毕竟承诺太重要了，太好用了。 后面会有async/await和promise的解释。 参考:promise用户指南相关阅读:什么是前端异步？什么情况下会出现异步？你知道html5 Web Worker标准吗？可以实现JavaScript的多线程？逆水行舟不进则退。前台的技术发展很快。每天不坚持学习，就跟不上。我会陪着你，每天推送博文，和你一起进步。希望你能关注我，尽快收到最新文章。 微信官方账号前台日常面试问题参考:微信官方账号