出去。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。在开发中，了解JavaScript和Promise的基础知识有助于提高我们的编码技能。今天，让我们来看看以下10个片段。我相信阅读这10个片段将帮助我们理解Promise。片段1：constprom=newPromise((res,rej)=>{console.log('first');res();console.log('second');});prom.then(()=>{console.log('第三');});console.log('fourth');//first//second//fourth//thirdPromise同步执行，promise.then异步执行。片段2：constprom=newPromise((res,rej)=>{setTimeout(()=>{res('success');},1000);});constprom2=prom.then(()=>{thrownewError('error');});console.log('prom',prom);console.log('prom2',prom2);setTimeout(()=>{console.log('prom',prom);console.log('prom2',prom2);},2000);//prom//Promise{}//__proto__:Promise//[[PromiseStatus]]:"resolved"//[[PromiseValue]]:"success"//2秒后，以上两个承诺将再次被调用。共有三种不同的状态：pendingfulfilledrejected一旦状态被更新，pending->fulfilled或pending->rejected，你可以再次改变它。prom1与prom2不同，两者都返回新的Promise状态。片段3：constprom=newPromise((res,rej)=>{res('1');rej('error');res('2');});prom.then(res=>{console.log('then:',res);}).catch(err=>{console.log('catch:',err);});//then:1偶数如果reject后有resolve调用，则只能执行resolve或reject中的一个，其余的不执行。片段4：Promise.resolve(1).then(res=>{console.log(res);return2;}).catch(err=>{return3;}).then(res=>{console.log(res);});//1//2Promises可以链接。当涉及到链式调用时，我们通常会考虑返回this，但Promises不会。每次promise调用.then或.catch时，默认返回一个新的promise，从而链接调用。片段5：constpromise=newPromise((resolve,reject)=>{setTimeout(()=>{console.log('first')resolve('second')},1000)})conststart=Date.now()promise.then((res)=>{console.log(res,Date.now()-start,"third")})promise.then((res)=>{console.log(res,Date.now()-start,"fourth")})//first//second1054third//second1054第四个promise的.then或者.catch可以调用多次，但是这里的Promise构造函数只执行一次。换句话说，一旦promise的内部状态发生变化并获得一个值，随后对.then或.catch的每次调用都将直接获得该值。片段6：constpromise=Promise.resolve().then(()=>{returnpromise})promise.catch(promise)//[TypeError:Chainingcycledetectedforpromise#]//UncaughtSyntaxError:Identifier'promise'已经被声明//at:1:1//(anonymous)@VM218:1.then或.catch不能返回promise本身，否则会导致死循环。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我和阿里云服务器合作，优惠价格比较便宜：89/年，223/3年，比学生便宜9.9/月，买了建了一个项目，熟悉技术栈比较香（老用户可以买用他们的家庭账户，我用我妈妈的）推荐购买三年的便宜货，点击本文查看。片段7：Promise.resolve().then(()=>{returnnewError('error');}).then(res=>{console.log('then:',res);}).catch(err=>{console.log('catch:',err);});//then:Error:error!//atPromise.resolve.then(...)//at...at.then或者在.catch中返回error对象不会抛出错误，所以后面的.catch不会捕获error对象，需要改成下面的一种：returnPromise.reject(newError('error'))thrownewError('error')因为返回任何非promise值都会被包装成一个Promise对象，即返回newError('error')等同于返回Promise.resolve(newError('error'))。Fragment8:Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)//1.thenor.catch应该是一个函数，传递一个非函数会忽略导致值的结果，例如.then(2)或.then(Promise.resolve(3)。片段9：Promise.resolve().then(functionsuccess(res){thrownewError('Erroraftersuccess');},functionfail1(e){console.error('fail1:',e);}).catch(functionfail2(e){console.error('fail2:',e);});//fail2:Error:成功后出错//atsuccess(:4:13).then可以接受两个参数，第一个是处理成功的函数，第二个是处理错误的函数。.catch是写第二个参数的方便方法.then，但是使用的时候要注意一点：.then第二个错误处理函数不能捕获第一个success函数和后续函数抛出的错误，.catch捕获的是之前的错误。当然，如果你想重写，下面的代码就可以了：'fail1:',e)}).then(functionsuccess2(res){},functionfail2(e){console.error('fail2:',e)})片段10:process.nextTick(()=>{console.log('1')})Promise.resolve().then(()=>{console.log('2')})setImmediate(()=>{console.log('3')})console.log('4');//Print4//Print1//Print2//Print3process.nextTick和promise.then都是微任务，setImmediate是宏任务，在检查阶段执行事件循环。微任务在事件循环的每个阶段（宏任务）之间执行，并在事件循环开始时执行一次。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：http://jamesknelson.com/grokk...干货交流系列文章总结如下。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。
