Promise代码详解(show you the code)

认识异步函数

  1.  同步函数:
     const sum1 =(a,b)=>{
       return a+b
     }
     console.log('AAA');
     console.log(sum(5,6));
     conosle.log('BBB')
    
     异步函数:封装一个函数,这个函数2秒后返回a+b的和
     const sum2 =(a,b,callback)=>{
       setTimeout(()=>{
          callback(a+b)
       },2000)
     }
    
     console.log('AAA')
     sum2(2,3,(result)=>{
        console.log(result)
     })
     console.log('BBB')
    
     错误事例:
     const sumAfter2s = (a, b) => {
       setTimeout(() => {
         return a + b;
       }, 2000);
     }
     这里面的return是定时器的这个函数的返回值,外部函数没有返回值
    
  2. 异步(Asynchronouse):不阻塞CPU,CPU先执行别的程序,这段程序被挂起,等它执行完,执行他的回调函数
  3. 目前的结论:同步函数,自己有返回值,而异步函数没有返回值(个人理解:为什么没有返回值,要拿到他的返回值肯定是有其作用,作用就是有用处,而异步函数会等其他的程序执行完在执行,所以在返回值也没有其作用了)

认识回调黑洞

  • 也叫做回调地狱,callback hell
  • 回调套回调,层次很多,这样会产生回调黑洞
  •   比如利用刚才的sum2这个函数,计算3,4的和,在把这个值与5相加,这些和在与6相加 
      三次计算两个数之和
      sum2(3,4,(r1)=>{
        console.log(r1)
        sum2(r1,5,(r2)=>{
          console.log(r2)
            sum2(r2,6,(r3)=>{
              console.log(r3)
            })
        })
      })
    
      这样的代码难以阅读,和维护,叫做回调黑洞
    
  • 下面引入Promise,来解决回调地狱

Promise -写同步的方法,写异步

  • 认识到生活中的电器缺少锲约
    • 生活中的电器都是异步工作的,他们工作的时候人不会被阻塞,人可以干别的
    • 这些电器在结束工作之后,干的事儿不同,通知形式也不同
    • 洗衣机在结束工作后,播放春天在哪里,微波炉工作结束后滴的一声
    • 通知形式不同的哲学就是:缺少契约
    • Promise就是为了统一这种契约来的:Promise生而为契约

Promise的基本使用

  1.  原始:
     const sum2 =(a,b,callback)=>{
       setTimeout(()=>{
          callback(a+b)
       },2000)
     }
     使用Promise:
     const sum2=(a,b)=>{
       return new Promise((callback)=>{
         setTimeout(()=>{
           callback(a+b)
         },2000)
       })
     }
     这里重写了num2方法,不同的是,
     这个函数返回Promise类的实例,在new Promise()的时候,要求传入真正的回调函数。
     new Promise(()=>{})里面做异步语句,异步结束后,调用callback()函数,将a+b传回来
     也就是说定义确实变的麻烦了,但是,调用它的时候,也换来了快感,此时的异步函数是有返回值的
    
     async function main(){
       console.log('AAAA');
       const r1 = await sum2(3, 4);
       const r2 = await sum2(r1, 5);
       const r3 = await sum2(r2, 6);
       console.log(r1);
       console.log(r2);
       console.log(r3);
       console.log('BBBB');
     }
     main();
    
     es6规定,async是标记异步函数的,await后面可以等一个Promise的实例
     有await语句的函数前面必须加async标记,并且箭头函数不行
    
     Promise实例天生就有三种状态:pending(进行中),fulfilled(结束),rejected(失败).
     一上来就处于pending状态,Promise只有它自己内部的语句,能够把它切换成filfilled的状态。
    
     -什么时候切换呢?
     就是new Promise()的时候传入的那个函数的形参被调用的时候,Promise状态会变为fulfilled。
     同时resolve()函数中的参数,将成为这个函数的返回值
    

Promise实际运用

  1.  顺序读取文件的例子
     原始:
     const fs = require('fs')
    
     fs.readFile('./a.txt',(err,nr1)=>{
       console.log(nr1.toString());
       fs.readFile('./b.txt',(err,nr1)=>{
         console.log(nr2.toString());
         fs.readFile('./c.txt',(err,nr1)=>{
           console.log(nr3.toString());
         })
       })
     })
    
     使用Promise干掉回调地狱,但是使用的时候都要封装
     const doFile=(filename)=>{
       return new Promise((resolve)=>{
         fs.readFile(filename,(err,nr)=>{
           resolve(nr.toString())
         })
       })
     }
     调用:
     async function main(){
       const nr1 = await doFile('./a.txt')
       console.log(nr1);
       const nr2 = await doFile('./b.txt')
       console.log(nr2);
       const nr3 = await doFile('./c.txt')
       console.log(nr3)
     }
     main();
    
  2.  Ajax顺序读取接口1,2,3
     原始地狱写法:
     $.get('jiekou1.java',(data1)=>{
       alert(data1);
       $.get('jiekou2.java',(data2)=>{
         alert(data2);
         $.get('jiekou3.java',(data3)=>{
           alert(data3);
         })
       })
     })
    
     使用Promise解决,先封装一下
     const qingqiu = (url)=>{
       return new Promise((resolve)=>{
         $.get(url,data=>{
           resolve(data);
         })
       })
     }
     封装挺恶心的,但是换回的是调用的快感
     async function main(){
       const nr1 = await qingqiu('jiekou1.java')
       alert(nr1);
       const nr2 = await qingqiu('jiekou2.java')
       alert(nr2);
       const nr3 = await qingqiu('jiekou3.java')
       alert(nr3) 
     }
     
     用Axios解决封装的麻烦,Axios这个包封装了Promise版的Ajax,把Aajx封装到了Promise里面了
     <script>引入Axios包</script>
     async function main(){
     		const nr1 = await axios.get('jiekou1.php').then(data => data.data);
     		const nr2 = await axios.get('jiekou1.php').then(data => data.data);
     		const nr3 = await axios.get('jiekou1.php').then(data => data.data);
    
     		alert(nr1);
     	}
    
     	main();
    
  3.  再vue中axios
     {
       data(){
         return {
           
         }
       },
       methods:{
         async loadData(){
           const jg = await axios.get('').then(data=>data.data);
           this.jg = jg
         async changePage(){
           const jg =await axios.get('').then(data=>data.data);
         }
         async changePageSize(){
           const jg =await axios.get('').then(data=>data.data);
         }
         }
       }
     }
    

理解Promise契约

  1.  将大家都统一了起来
     const xiyifu = (脏衣服,洗衣粉) => {
       return new Promise((resolve) => {
         进水、
         进洗衣粉、
         洗20分钟、
         排水、
         再进水、
         漂水、
         放水、
         resolve(干净衣服);
       });
     }
     const menfan = (冷饭) => {
       return new Promise((resolve) => {
         加蒸汽、
         再加蒸汽、
         再加蒸汽、
         resolve(热饭);
       });
     }
     
     async function main(){
       const a = await xiyifu('内裤');
       const a = await menfan('米粒');
     }
    

Promise方便调错

  1.  try...catch...捕获的“可能发生”的错误,不会影响程序正常执行
     console.log(1);
     console.log(2);
     console.log(3);
     try{
       console.log('★');
       asdfasdflkajsdlfjk
     }catch(e){
    
     }
     console.log(4);
     console.log(5);
     // 打印  1 2 3 ★ 4 5
    
     异步函数不能被try...catch...
    
     const sumAfter2s = (a, b) => {
       return new Promise((resolve, reject) =>{
         setTimeout(() => {
           if(a + b > 10){
             resolve(a + b);
           }else {
             reject('两个数字太小')
           }
         }, 2000);
       });
     };
    
     sumAfter2s(3, 4).then(data => {
       console.log(data);
     }).catch(e => {
       console.log(e);
     })
    

面试题参考

  1.  只写一行语句,实现效果:
     async function foo(){
     // 等到2秒
     await _________________________________________________
     alert('你好');
     }
     foo();
    
     答案:
     <script type="text/javascript">
     	async function foo(){
     		// 等到2秒
     		const a = await new Promise((resolve) => {
     			setTimeout(() => {
     				resolve(34)
     			}, 2000)
     		});
     		alert(a);
     	}
    
     	foo();
     </script>
    
原文地址:https://www.cnblogs.com/JCDXH/p/11767862.html