zoukankan      html  css  js  c++  java
  • ES6 promise学习

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

    1.promise是一构造函数,既然是构造函数,那么我们就可以用 new Promise()得到一个promise实列。

    2.在promise上,有来给个函数,分别叫做resolve(成功之后的回调函数)和 reject(失败之后的的回调函数)

    3.在promise构造函数的protype属性上,有一个.then()方法,也就是说,只要是promise构造函数创建的实例,都可以访问到.then()方法。

    4.Promise表示一个异步操作;每当我们new一个promise的实例,这个实力,好表示一个具体的异步操作;

    5.既然promise创建的实例,是一个异步操作,那么,这个异步操作的结果,只有两种状态

      5.1状态1:异步执行成功了,需要在内部调用成功的回调函数resolve把结果返回调用者

      5.2状态2:异步执行失败了,需要在内部调用失败的回调函数reject把结果返回调用者

      5.3由于promise的实例是一个异步操作,所以,内部拿到操作的结果后,无法使用return把操作的结果返回调研组,这时候,只能使用回调函数的形式,来把成功或失败的的结果,返回调用者。

     

    function getFilePath(fpath){
                var promise=new Promise(function(resolve,reject){
                    fs.readFile(fpath,'utf8',(err,dataStr)=>{
                        
                        // 这里面使用return不能返回值, 只能调用回调
                        if(err) return reject(err);
                        resolve(dataStr)
                    })
                })
                return promise;
            }
            var p=getFilePath('1.txt');
            p.then(function(data){
                console.log(data)
            },function(err){
                    // console.log(data+'+++++');
                    console.log(err.message)
                })
    

     promise的正确使用方式

     // 串联的方式
            // 读取文件1
            const fs=require('fs')
            function getFilePath(fpath){
                return new Promise(function(resolve,reject){
                            fs.readFile(fpath,'utf8',(err,dataStr)=>{
                                
                                // 这里面使用return不能返回值, 只能调用回调
                                if(err) return reject(err);
                                resolve(dataStr)
                            })
                        })
            }
            // 先读取文件1,再读取文件2,文件3,
            // 如果前面的promise的执行失败,我们不想让后续的promise操作被终止,可以为每个promise指定失败的回调
            getFilePath('11.txt').then(function(data){
                console.log(data);
                 // 读取文件2
                return getFilePath('2.txt')
            },function(err){
               
                console.log('这是失败的结果'+err.message);
                 // return 一个新的promise,不耽误后面的执行
                 return getFilePath('2.txt')
            }).then(function(data){
                console.log(data);
                 // 读取文件3
                return getFilePath('3.txt')
            }).then(function(data){
                console.log(data)
            })
    

     当我们有这样的需求,哪怕前面的promise执行失败了,但是不要影响后续promise的正常执行,此时,我们可以单独为每个promise,通过.then指定下一个失败的回调

    2.有时候,我们有这样的需求,和上面的需求相反,如果后续的promise执行,依赖于前面promise执行结果,如果前面的失败了,则后面的就没有继续执行下去的意义了,此时,我们想要

    实现,一旦有报错则立即终止所有的promise执行

     1 const fs=require('fs')
     2 function getFilePath(fpath){
     3     return new Promise(function(resolve,reject){
     4                 fs.readFile(fpath,'utf8',(err,dataStr)=>{
     5                     
     6                     // 这里面使用return不能返回值, 只能调用回调
     7                     if(err) return reject(err);
     8                     resolve(dataStr)
     9                 })
    10             })
    11 }
    12 // 先读取文件1,再读取文件2,文件3,
    13 // 如果前面的promise的执行失败,我们不想让后续的promise操作被终止,可以为每个promise指定失败的回调
    14 getFilePath('1.txt').then(function(data){
    15     console.log(data);
    16      // 读取文件2
    17     return getFilePath('12.txt')
    18 }).then(function(data){
    19     console.log(data);
    20      // 读取文件3
    21     return getFilePath('3.txt')
    22 }).then(function(data){
    23     console.log(data)
    24 }).catch(function(err){
    25     // catch作用:如果前面有任何的promise执行失败,即立即终止所有的promise的执行
    26     // 并马上进入catch去处理promise中并抛出异常
    27     console.log(err.message)
    28 })
    View Code

     使用promisej结合ajax

     1    <button type="button" value="获取数据" id="btn">"获取数据</button>
     2     <script>
     3         $(function(){
     4             $('#btn').on('click',function(){
     5                 $.ajax({
     6                     url:'data.json',
     7                     type:'get',
     8                     dataType:'json',
     9                    
    10                 }).then(function(data){
    11                     console.log(data);
    12                 })
    13             })
    14         })    
    15     </script>
    View Code
  • 相关阅读:
    linux网桥浅析
    linux slub分配器浅析
    vs2015 C# WinForm 使用皮肤 美化窗体
    枚举可以直接赋值给int
    LINK : fatal error LNK1000: Internal error during IncrBuildImage
    map映射类
    map
    time
    int to string
    eclipse
  • 原文地址:https://www.cnblogs.com/wanqingcui/p/10741610.html
Copyright © 2011-2022 走看看