Vue教程-6-Promise

目录

概念

Promise的3种状态

Promise链式调用

Promise.all

---

概念

ES6自带一个非常重要和好用的特性，即Promise；Promise是异步编程的一种解决方案，比较完美的解决回调地狱的问题，从之前的“嵌套-嵌套-嵌套”改成了“链式调用”，下面通过一段代码来解释下变迁过程：

call((){   doProcess(){     发出网络请求   },   doSuccess(){     网络请求成功     if(data.flag = true){         if(data.url != ''){           call((){             doProcess(){},             doSuccess(){},             doFail(){}           });         }     }else{       后台查询异常，或者，后台无此数据     }   },   doFail(){     网络请求失败   } });

上面这块代码，一层call函数嵌套一层call函数，这种类似于if里面嵌套if，一层套一层，而链式调用呢，有点类似JDK8的流运算：obj.xxx.xxx.xxx.xxx.xxx，形成一条链，方便维护：

<script> export default {   name: 'App' } // resolve本身又是函数，成功的时候调用 // reject本身又是函数，失败的时候调用 rejec('adad') new Promise((resolve, reject) => {   setTimeout(() => {     console.log('------------------------------');     // 如果这里调用了resolve()函数，代表执行成功，然后Promise就会去执行then方法     resolve();     // 如果这里调用了reject()函数，代表执行成功，然后Promise就会去执行catch方法     reject('失败信息');   },5000); }).then(()=>{   console.log('------------------------------');   return new Promise((resolve, reject) => {     setTimeout(() => {       console.log('------------------------------');       resolve();     },5000);   }); }).catch((error)=>{console.log(error)}).then(()=>{}).catch((error)=>{});; </script>

或者这样

<script> export default {   name: 'App' } // resolve本身又是函数，成功的时候调用 // reject本身又是函数，失败的时候调用 rejec('adad') new Promise((resolve, reject) => {   setTimeout(() => {     // 如果这里调用了resolve()函数，代表执行成功，然后Promise就会去执行then方法     // resolve('成功信息');     // 如果这里调用了reject()函数，代表执行成功，然后Promise就会去执行catch方法     reject('失败信息');   },5000);   // then有2个参数，第1个参数代表resolve的参数，第2个参数代表reject的参数，因此，一个then可以融合then与catch方法 }).then(data => {console.log(data)},err => {console.log(err)}); </script>

Promise的3种状态

Pending：等待状态，比如正在进行网络请求，或者定时器没有到时间；（网络请求中，尚未拿到返回结果）

Fulfill：满足状态，当我们主动回调resolve函数时，就会处于该状态，并且会回调then函数，结果在then中处理；（通俗来讲就是网络请求结束且正常返回结果）

Reject：拒绝状态，当我们主动回调了reject函数时，就会处于该状态，并且会回调catch函数；（网络请求失败）

Promise链式调用

<script> export default {   name: 'App' } // resolve本身又是函数，成功的时候调用 // reject本身又是函数，失败的时候调用 rejec('adad') new Promise((resolve, reject) => {   setTimeout(() => {     // 如果这里调用了resolve()函数，代表执行成功，然后Promise就会去执行then方法     // resolve('成功信息');     // 如果这里调用了reject()函数，代表执行成功，然后Promise就会去执行catch方法     reject('失败信息');   },5000);   // then有2个参数，第1个参数代表resolve的参数，第2个参数代表reject的参数，因此，一个then可以融合then与catch方法 }).then(data => {   // return Promise.resolve(data);   // 这里等效于 return Promise.resolve(data);   return data; },err => {   console.log(err) }); </script>

Promise.all

Promise.all([   new Promise((resolve, reject)=>{resolve(data)}),   new Promise((resolve, reject)=>{resolve(data)}),   new Promise((resolve, reject)=>{resolve(data)}) ]).then(results => {   // 上面有3个网络请求，当这3个网络请求都结束之后，由于都是调用的resolve，当这3个网络请求都执行resolve后   // 再调用all的then方法，该方法参数是一个数组，数组长度对应着网络请求的数据，数组里面的值就是resolve方法传过来的参数   results[0]   results[1]   results[2] });