Javascript中内置的延迟对象Promise

Javascript中内置的延迟对象Promise阅读目录Promise的基本使用：Promise实例的三种状态：then方法：catch方法：构造函数Promise的四个方法：官方的例子：其他：浏览器支持情况：Promise的基本使用：利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题，更简洁地控制函数执行流程；通过new实例化Promise，构造函数需要两个参数，第一个参数为函数执行成功以后执行的函数resolve，第二个函数为函数执行失败以后执行的函数reject：运行下面代码newPromise(function(resolve,reject){});通过Promise，我们把回调函数用线性的方式写出来，而不是一层套一层，这个函数有四层回调；运行下面代码复制代码fn(args,function(a){fn1(foo,function(b){fn2(bar,function(c){fn3(baz,function(d){alert(回调成功，获知的内容为：+a+b+c+d)})})})})复制代码以上的Demo只有包含成功的回调，如果失败的回调也算的话，也就更麻烦了；如果使用Promise的方式，我们可以改装成线性的代码，更加符合阅读的习惯，只要在then函数下写逻辑即可；运行下面代码复制代码newPromise(function(resolve,reject){resolve(1);}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(2);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(3);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(4);});}).then(function(val){console.log(val);});复制代码这是一个ajax异步获取数据的例子，我们使用了回调函数；运行下面代码复制代码htmlheadmetacharset=utf-8/headbodyscriptvarcallback=function(res){console.log(res);};varajax=function(url,callback){varr=newXMLHttpRequest();r.open(GET,url,true);r.onreadystatechange=function(){if(r.readyState!=4||r.status!=200)return;vardata=JSON.parse(r.responseText);callback(data);};r.send();};//执行请求：ajax(=10&f={firstName},callback);//再做别的事情；/script/body/html复制代码因为ES6内置了Promise，我们可以把以上的callback改写成promise的方式，首先ajax函数返回一个Promise对象；运行下面代码复制代码htmlheadmetacharset=utf-8/headbodyscriptvarcallback=function(res){console.log(res);};varajax=function(url){returnnewPromise(function(resolve,reject){varr=newXMLHttpRequest();r.open(GET,url,true);r.onreadystatechange=function(){if(r.readyState!=4||r.status!=200)return;vardata=JSON.parse(r.responseText);resolve(data);};r.send();})};//执行请求：ajax(=10&f={firstName}).then(function(data){callback(data);});//再做别的事情；/script/body/html复制代码回到顶部Promise实例的三种状态：每一个实例化的Promise都有三个状态；pending(等待)rejected(拒绝)resolved(解决)，默认的状态为pending，如果执行了resolve()，那么这个promise的状态会变为resolve，如果执行了reject(),那么这个promise的状态就会变成rejected，而且这些状态是不可撤销的，一经更改，不会再变了；回到顶部then方法：promise有一个then方法，then方法接收两个参数，第一个为函数的成功回调，第二个为函数的失败回调：运行下面代码复制代码varpromise=newPromise(function(resolve,reject){resolve();//执行成功回调;});console.log(0);promise.then(function(val){console.log(1);},function(){console.log(失败);});console.log(2);复制代码运行下面代码复制代码varpromise=newPromise(function(resolve,reject){reject();});console.log(0);promise.then(function(val){console.log(1);},function(){console.log(失败);});console.log(2);复制代码then方法每一次都是返回不同的Promise实例，then的第一个参数是成功回调，这个成功回调的参数为：上一个Promise实例执行resolve方法的参数；一般来说，then方法会返回当前的promise，如果在then方法里面return一个新的Promise实例，那么此时的then返回的就是新的Promise实例，利用这个特性，就可以实现多层回调；运行下面代码复制代码newPromise(function(resolve,reject){resolve(1);}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(2);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(3);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(4);});}).then(function(val){console.log(val);});复制代码不管代码是异步还是同步的，都可以用Promise的then方法，同步的代码直接写在then方法第一个参数，把需要参数通过resolve传给下一个then方法，如果是异步的代码，就直接return一个Promise实例：运行下面代码复制代码newPromise(function(resolve,reject){resolve(1);}).then(function(val){console.log(val);return2;}).then(function(val){console.log(val);return3;}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){//异步操作些这里resolve(4);});}).then(function(val){console.log(val);return5;}).then(function(val){console.log(val);});复制代码回到顶部catch方法：catch方法和失败回调时一样的，如果上一个异步函数抛出了错误了，错误会被捕获，并执行catch方法或者失败回调；运行下面代码复制代码varpromise=newPromise(function(resolve,reject){resolve();//执行成功回调;});console.log(0);promise.then(function(val){console.log(成功);thrownewError(heheda);}).catch(function(e){console.log(e);}).then(function(){console.log(继续执行);});复制代码Promise中的错误是会一层层传递的，如果错误没有没有被捕获，会一直传递给下一个promise对象，直到被捕获为止，然后继续往下执行：运行下面代码复制代码newPromise(function(resolve,reject){resolve(1);}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){thrownewError(err);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(3);});}).then(function(val){console.log(val);returnnewPromise(function(resolve,reject){resolve(4);});}).then(function(val){console.log(val);}).catch(function(err){console.log(err);}).then(function(){console.log(继续执行)})复制代码回到顶部构造函数Promise的四个方法：构造函数Promise有四个方法,Promise.all，Promise.race,Promise.reject,Promise.resolve：Promise.all(iterable)返回一个promise对象，当iterable参数里所有的promise都被解决后，该promise也会被解决要注意all方法是Promise函数的方法，不是实例的方法，参数是一个数组，数组里面全是Promise的实例：运行下面代码复制代码varp0=newPromise(function(resolve){setTimeout(function(){resolve(0)},1000);})varp1=newPromise(function(resolve){setTimeout(function(){resolve(1)},2000);})varp2=newPromise(function(resolve){setTimeout(function(){resolve(2)},3000);})Promise.all([p0,p1,p2]).then(function(arr){console.log(arr)})复制代码Promise.race(iterable)当